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/

ドットを意識する

本当に16px？と疑うほど細かく綺麗なアイコンは、よくよく見るとぼやけた部分が少なく、かなりドットを意識して作られています。
ドットを打って作られたアイコンははっきりしていて綺麗ですが、モチーフを縮小して作る場合でも少し調整してあげるとわかりやすくいい感じになります。

ドットを意識したfaviconのサイト

任天堂
http://www.nintendo.co.jp/

Chrome ブラウザ
https://www.google.com/intl/ja/chrome/browser/

アニメーションにしてみる

faviconにはアニメーションGIFも使えます！
目立たせたいときにはいい方法ですね。ただし、残念ながら現在はFirefoxにしか対応していません……。
アイコンは通常のものとアニメのものを2パターン用意する必要があります。
以下のように両方指定すると対応ブラウザ以外は通常のものが表示されます。

<link rel="SHORTCUT ICON" href="hogehoge/images/favicon.ico">
<link rel="icon" href="hogehoge/images/favicon.gif" type="image/gif">

アニメーションのfaviconのサイト

面白法人カヤック
http://www.kayac.com/

マイ・フェイバリット関西
http://www.my-fav.jp/

※上記faviconは2013年3月14日時点のものです。

モチーフがないときは……

マークがない、ロゴもfaviconにしづらい、モチーフがなにもない！というとき。
無理に何かを探すより、サイトのカラーだけでシンプルに作ってもオシャレです。枠をつけたり丸にしたりするだけで意外と個性が出ますよ。

シンプルなfaviconのサイト

Rhizomatiks
http://rhizomatiks.com/

Webpark
http://weboook.blog22.fc2.com/

おまけ

おまけで、上記で例で出した他にも私の好きなfaviconのサイトをご紹介。
細かい仕事にうっとりです。

Marble.co
https://www.marble-co.net/portfolio

華恵オフィシャルサイト｜ORIHIME
http://hanae-orihime.com/

Firebug
https://getfirebug.com/

【favicon作成をお助け】
※ 【2021】無料で商用利用可なフリーアイコン素材サイト12選

※ スマホ対策！faviconを設定するなら「ウェブクリップアイコン」も忘れずにね！

※ 最近お世話になったWEB制作に関するお役立ちツール＆プラグイン

※ Photoshopでゲームのようなドット絵を描く方法と設定＆おすすめツール

※ TwitterやFacebookユーザーにオススメ！アイコン作成サイトまとめ16選