9bicMag™

忘れそうなのでメモです。ナカトミツヨシです。

faviconはウェブサイトの顔とも言える存在です。そんなfaviconですが、Photoshopを使えばかなり綺麗かつ、透過もしっかりされるfaviconを作る事が出来ます。今回は、PhotoshopCS5を例に、faviconの作り方を簡単にご紹介します。

Step 1

通常は、PhotoshopCS5ではfaviconの「Windows Icon (.ico)」形式で保存が出来ません。そこで、プラグインを導入して「Windows Icon (.ico)」形式で保存できるようにしましょう。以下のサイトにアクセスしてください。

Photoshop icoformatICO (Windows Icon) Format Plugin

「という項目にダウンロード可能なファイル一覧があります。お持ちの環境に応じてダウンロードしてください。私の場合、MacのPhotoshopCS5（64bit）なので、「New Beta!Mac CS5 (Intel 32/64-bit)」からダウンロードしました。

Step 2

ダウンロードが出来たら、解凍したプラグインファイル（.plugin）を、PhotoshopCS5が起動していない状態で、以下のフォルダへ入れます。

Mac：「Applications > Adobe Photoshop CS5 > Plug-ins > File Formats」

Win：「Program Files¥Common Files¥Adobe¥Plug-Ins¥CS5¥File Formats」

フォルダへ入れた後は、PhotoshopCS5を起動すればプラグインが使える状態になっているはずです。「プラグインについて」を開いて、「ICO(Windows Icon)」が表示されている事を確認してください。

Step 3

あとは、いつも通りにPhotoshopCS5でアイコンのデザインをします。その際、faviconのフォーマットは32px四方（表示は16px四方）になるので、最終的なサイズを想定しながらデザインすると良いでしょう。

デザインが終わったら、32px四方のサイズで保存します。その際に、フォーマットにて先ほどインストールした「ICO (Windows Icon)」を選択してください。また保存名は「favicon.ico」にしましょう。こちらも一応フォーマットなので、特に理由が無い場合は名称を変更しない方が良いでしょう。

Step 4

あとは、アップロードすれば完了です。HTMLのソースに以下の一分を追記するとより良いでしょう。

<link rel="shortcut icon" type="image/x-icon" href="ファビコンへのURL/favicon.ico" />

もし表示が変わらない場合は、しばらく待つか、ブラウザのキャッシュを空にしましょう。

良いファビコンを作っちゃってくださいね！