ファビコン|Photoshopでブラウザタブのアイコン画像(.ico)を作る方法

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

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

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

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

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

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

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

ぼく
あれっ…あれっ…ないぞ…

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

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

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

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

ダウンロードサイト

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

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

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

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

ぼく
最新のバージョンである「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 2019 の場合
c:\Proguram FIles\Adobe\Adobe Photoshop CC 2019\Plug-ins
Macの場合

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

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

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

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

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

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

なお、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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください