Photoshopでfavicon(ファビコン)の画像形式「.ico」を作る方法をまとめてみた

フォトショップでファビコン(.icoファイル)を作る方法

新サイト立ち上げの際、地味に困った話。

それは、ファビコンのデータ形式である「.ico」ファイルの作成の仕方。

当初は作成したファビコン画像をPhotoshop(フォトショップ)に持っていき拡張子「.ico」を選んで保存。で、終わり!…と思っていました。

…がいくら探しても保存するファイル形式に「.ico」という拡張子がない。

フォトショップ_保存のフォーマットに.icoがない

フォトショップの保存画面

ぼく

あれっ…あれっ…ないぞ…

そう、デフォルトでは「ico」形式で保存できないんですよね。

ということで解決法をば。

Photoshopでファビコン(.icoファイル)を作る方法

Photoshop(フォトショップ)の保存形式で拡張子「ico」を出現させるには、プラグインをインストールする必要があります。

ダウンロードサイト

↓ 遷移先の画面は下記の通り。

ICOのプラグインをダウンロード

赤枠で囲った部分からダウンロード

Photoshop(フォトショップ)のバージョンごとにダウンロード用のリンクが分かれているため、自身の環境とマッチしたファイルをダウンロードします。

ぼく

最新のバージョンである「CC」のダウンロードリンクは下記の通り。

  • Windows (64 bit)
     All Photoshop versions for 64-bit Windows, including CC
  • Mac CS5/CS6
     CS5, CS6 for Intel Mac

ダウンロード完了後、ファイルを解凍し、解凍されたデータ「ICOFormat.plugin」を下記フォルダに移動させます。(該当フォルダまでのパスがWindowsとMacで異なります。)

Windowsの場合

C:\Program Files\Adobe\Adobe Photoshop [Photoshop_バージョン]\Plug-ins

Photoshop CC 2021 の場合
c:\Proguram FIles\Adobe\Adobe Photoshop CC 2021\Plug-ins
Macの場合

Applications\Adobe Photoshop [Photoshop_バージョン]\Plug-ins\

Photoshop CC 2021の場合
Applications\Adobe Photoshop CC 2021\Plug-ins\

すると、Photoshop(フォトショップ)の保存形式で「ICO(Windows Icon)」が選択できる様になり、ico形式での保存が可能になります。

フォトショップ_保存のフォーマットに.icoが出現

フォトショップの保存画面にICOが出現

ぼく

プラグイン インストール前にPhotoshop(フォトショップ)を起動していた場合は、再起動が必要です。

なお、PNGなど様々な画像ファイル形式からICOへと変換するオンラインサービスもいくつかあるので、わざわざプラグインをインストールするのが手間という方はそれらのサービスを利用してもいいかと思います。

数秒でPNGをICOファイルへ変換する最良の方法。 100%無料で、安全、そして使いやすい! Convertio — いかなるファイルのどんな問題も解決する高度なオンラインツール。

・・・

ここからは余談。

ファビコンを「ico」ファイルで作成する理由についてですが、それは「IE(Internet Explorer)」で表示させるためです。

「IE」以外のブラウザでは、ファビコンのファイル形式がPNGやGIFなどでも表示されますが、「IE」の場合はNG。

なので、「ico」ファイルで作成する必要がある…という訳です。

・・・

またファビコンの設置場所についてですが、HTMLのhead内に下記の通り記述をすればOKです。

<link rel=”shortcut icon” href=”ファビコンまでのパス/ファビコンの名前.ico”>

そんな感じで。終わりッ!

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください