綺麗なfavicon（ファビコン）作成の基本的なコツ・アイデアまとめ

デザイナーのサリーです。

ブックマークしたサイトのfaviconを眺めるのが好きです。
小さくて細かいものが並んでいるときゅんとします。

今日はfavicon作成時に気をつけている点や、コツ・アイデアをごちゃまぜにまとめてみました（設置方法は省いています）。
かなり自己流の部分もあるので、参考程度に読んでいただけると幸いです。

サイズについて

みなさんはfaviconはどのサイズで作っていますか？
サイズは基本の基本のようですが、実はサイトによってやり方がさまざまで、結構悩みどころだったりします……。

faviconの表示サイズは 16px × 16px や 32px × 32px ですが、作成サイズは 32px × 32px で作っている方や、両方作ってマルチアイコン（※）にする方もいると思います。

※複数のサイズのアイコンをico形式で1つのファイルにまとめたアイコン画像のこと

そこで、代表的なサイズをひとつひとつ整理してみました。

代表的なサイズまとめ

• 16px × 16px：IEのタブ
• 24px × 24px：IE9の「ピン留め機能」
• 32px × 32px：Chrome、Firefox、Safariなどのタブ
• 48px × 48px：Windowsのサイトアイコン
• 64px × 64px：高解像度のWindowsサイトアイコン

などなど、現在では20種類以上のfaviconサイズがあると言われていますが、その中でも押さえておきたいものをピックアップしました。

ウェブクリップアイコンについては、こちらの「スマホ対策！faviconを設定するなら「ウェブクリップアイコン」も忘れずにね！」を参考にしてみてください。

その他

さらには、ショートカットアイコンで 48px × 48px、64px ×64px、128px ×128px、258px ×258px を使用するOSもあり…きりがなくなってきました。

	ショートカットアイコンはfaviconが使用されます。

たくさんのサイズのアイコンを毎回用意するのは正直大変ですよね。
大きなサイズでひとつ作って縮小して使いまわすこともできますが、思うように綺麗に縮小してくれなかったり、古いブラウザは対応していないこともあるようです。

個人的なおすすめ

個人的には 16px × 16px 、32px × 32px のふたつをマルチアイコンにすれば充分だと思っています。
（32px × 32px ひとつでもいいですが、16px × 16px になったときにブラウザによって見え方が違ったり、思うように綺麗に縮小されないことがありました。）

きっちり完璧に作りたい方は、すべてのサイズをマルチアイコンにするのも手ですが、ファイルサイズが大きくならないように気をつけましょう。

フォーマットについて

基本その2です。
favicon画像は「.png」や「.gif」でも表示できますが、古いブラウザは対応していないものもあるので、マルチアイコンにもできる「.ico」が一番好ましいです。

「.ico」への変換方法

Webサービス・ツールでもgifやpngからicoへの変換ができますが、Photoshopにプラグインを入れることでもico形式で書き出しができるようになります。

http://www.telegraphics.com.au/sw/product/ICOFormat#icoformat

ダウンロードしたプラグインファイルをPhotoshopの「Plug-ins > File Formats」のフォルダに入れればOKです（OSやPhotoshopのバージョンによってファルダの場所は違いあり）。

ただ、Photoshopからそのままマルチアイコン化する方法がわからず……。
というわけで、マルチアイコンにする場合はpngで書きだしてから下記サービスを利用しています。

• 複数マルチアイコンを作ろう！

  http://ao-system.net/multiicon/

透過させる

かわいいfaviconを見つけても、背景が白いままで透過されていないとちょっと残念に感じます。すごく簡単なことですが、デザインに含まれていなければ背景は透過させたほうが手間がかかっているように見えます。

綺麗に透過されたfaviconのサイト

Twitter
http://twitter.com/

Dropbox
https://www.dropbox.com/ja/