実は簡単だった!Photoshop CS6でファビコン(favicon)を編集する方法

先日、拡張子が.icoのファイル(いわゆるfavicon=ファビコン)を少し編集して欲しいという依頼があり、自前のPhotoshopで編集しようとした所・・・まさかのエラーで開けないという事態に直面。

Photoshopにお詳しい方であれば、直ぐに解決方法がわかるのだと思いますが、素人同然の私は何とも初歩的な所で躓いてしまいました。

今回お届けするのは、Photoshopでfavicon(拡張子が.icoのファイル)を編集する方法についてです。

Photoshop CS6で.icoは開けない?

私は少し古いモデルのPhotoshop CS6を使用しています。(恥ずかしながら形から入るタイプなので物だけは持っています。)

Adobe社のPhotoshop CS6は、高額な製品なのですが、『インストールした直後』の状態のままでは、拡張子が.icoのファイルを編集することはおろか、開くことさえ出来ないということを、今回のエラーで知りました。

その表示されるエラーも結構ストレートで、「要求された操作を完了できません。ドキュメントの種類が適切ではありません。」と、バッサリ。

こうなると、素人の私は涙目です。

.icoを編集できるフリーソフトを探すことも考えましたが、天下の(言い過ぎかも?)Photoshopが.icoファイルを編集できないなんて勿体無い!という事で、どうやったら使えるようになるかを調べました。

プラグインを導入すれば、.icoが編集可能になる!?

プラグインとは差し込むという意味がある言葉ですが、パッケージソフトウェアに関して言えば、パッケージ機能を拡張する為の追加ファイルの事を指します。

そして今回はプラグインの力を借りることで、Photoshopでも拡張子が.icoのファイルを編集出来るようになりました。

プラグインは、配布元によって有料だったり無料だったり様々です。
今回使用したプラグインは無料で提供されていました。

プラグインをダウンロードする

  1. http://www.telegraphics.com.au/sw/icoformat.ja.htmlにアクセスします。
  2. お使いの環境に適したプラグインをダウンロードします。OSの違いは勿論ですが、特に端末が32Bitか64Bitかで、ダウンロードするファイルが変わりますので要注意です。
  3. ダウンロードしたファイルは圧縮されていますので、ファイルを解凍(展開)します。

    ※私の場合、Windowsの64Bitをダウンロードしましたので、ファイルを解凍しますと、ICOFormat64.8biという拡張子のファイルが入っています。これがプラグインです。

プラグインの設定方法

プラグインの設定には2通りの方法があります。プラグインを直接配置する方法と、Photoshopのメニューからインストールすると方法 とがあります。

プラグインを直接配置する方法

一見面倒に見えて、プログラムがインストールされている場所等が直ぐにわかる人にとっては、こちらの方法が楽だと思います。

特に手順的なものは無く、基本的に解凍した「.8bi」ファイルを所定の場所に配置するだけです。

Photoshopが起動していない状態で作業して下さい。
  1. 64Bitの場合は、概ね以下の場所に配備すればOKです。自身の環境に合わせて適宜読み替えをお願いします。
    ファイルの配置場所
    C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Plug-ins\Panels
  2. ファイルをコピーする際、Windowsにログインしているユーザーに権限が付属している場合、管理者権限が必要である旨のメッセージが表示されます。
    「対象フォルダーへのアクセスは拒否されました」と言われると、物凄く焦りますが、特に身構える必要も無く、「続行」して問題ありません。
  3. 以下のように、ファイルが配備されれば準備完了です。
  4. これで準備完了です。

Photoshopのメニューからインストールする方法

Photoshopのプラグインをインストールする画面へは直感でもたどり着くことが出来ますが、忘れないようにメモしておきます。

  1. Photoshopを起動したら、編集>環境設定>プラグインと進みます。
  2. プラグインをインストールする為の画面が表示されますので、「追加のプラグインフォルダー」にチェックを入れます。
    チェックを入れると、プラグインファイル「.8bi」のある場所をフォルダで指定します。
  3. プラグインが入っているフォルダを選択しましたら「OK」を押下して、環境設定の画面を閉じます。
    ※環境設定の画面の一番下にも記載がありますが、Photoshopを再起動するまでプラグインは有効になりません。
  4. これで、Photoshopを再起動したら準備完了です。

Photoshopで.icoファイルを開いてみる

プラグインのインストールが完了して、準備が出来ましたので、早速当ブログのfaviconを読み込んでみました。

  1. favicon(.ico)ファイルをPhotoshopで開く際に、プラグインの設定が正しく出来ていると、アイコンの解像度を選択する「ICO(Windows Icon)Format – Choose icon」が表示されます。
  2. 編集したいサイズの解像度を選択し、「OK」を押下します。
    複数の解像度を纏めて1ファイル内に持つ、.icoファイルですが、Photoshopで編集出来るのは1解像度のみとなりますので、一番大きい解像度を選択して開くことをオススメします。
  3. 後は編集して保存するだけですが、この保存の時「.ico」ファイル形式で保存をしても、1解像度しか持たないファイルにしかなりませんので、「.png」など別拡張子で保存するなどし、以前に紹介したfavicon作成のサービスを使って「.ico」ファイルを作成するのが楽な方法です。

    超簡単!Webで出来るファビコン(favicon)の作成方法

    2017.10.18

まとめ

faviconの元になる高解像度の画像があれば、それを加工してからfaviconに変換するのが一番シンプルかつ楽な方法です。

しかしながら、今回の依頼では元になる高解像度の画像が無く、faviconから画像を取り出す必要があったというのが、一番のポイントでした。

同様にfaviconをPhotoshopで編集したい(開きたい)という方の役に立てば幸いです。

ABOUTこの記事をかいた人

当ブログでは、私自身が困って調べたこと、試した事を中心に記事を書いています。何か少しでもお役に立てれば幸いです。 最近では、企業様からのレビュー記事のご依頼を頂くことも出てきました。 お気軽にお問合わせよりご連絡下さい。