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


Webサイトを作る時にfaviconを設定しておくことで、ブラウザのタブや、ブックマークされた時にアイコンを表示させることができます。
このfaviconは.icoというファイル形式で作成する必要があります。しかし、この.iconファイルはphotoshopでは作ることができません。

なぜならデフォルトでは、photoshopの保存できるファイル形式に.icoが用意されていないからです。

しかし、プラグインを入れることでphotoshopでもfavicon.icoを作ることができるようになります。


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

まず、↓のサイトのICO (Windows Icon) Formatから使っているPhotoshopのバージョンに合わせてプラグインをダウンロードします。

ICO (Windows Icon) Format

僕は以前にブログに書いたようにadobe cloudを使っているのCS6です。
ここではMac CS5と記載されている所のプラグインをダウンロードします。


ダウンロードデータを解凍すると下記のようになっています。

この内、ICOFormat.pluginを↓のようにAdobe Photoshop CS6/Plug-ins/〜の形になるようにコピーします。

コピーしたらPhotoshopを再起動してください。インストールは以上です。


favicon.icoを作ってみる

.icoファイルの作りかたは簡単です。

faviconのサイズである16px×16pxで画像を作ったら、「ファイル」→「別名で保存」を選択すると↓のようにICO (Windows icon)が増えています。この形式で保存するだけです。

「Web用に保存」ではないので間違えないでください。

以上です!


favicon.icoを作るジェネレーターは沢山ありますけど、僕は使いなれたphotoshopで完結したいのです。

この記事を書いた人:

ナカシマ

北区赤羽在住のWEBデザイナー兼エンジニア。インターネット、WordPress、本・漫画、音楽が大好き。妻と猫と暮らすアップル信者。

BLOG: 着ぐるみ追い剥ぎペンギン