512×512 の美しいアイコンをサイトにアップロードしたのに、ブラウザのタブではぼやけた表示にってしまう——そんな経験はないでしょうか。解決策はファイルサイズを大きくすることではなく、16、32、48 ピクセルという複数サイズを 1 つのコンテナに収めた favicon ICO を用意することです。
この単一の .ico ファイルは、多くの開発者があまり意識していない重要な役割を担っています。つまり、ブラウザが必要とするあらゆる場面で、最適なピクセルグリッドを届ける役割です。タブストリップには 16×16、Hi-DPI ディスプレイには 32×32、Windows のタスクバーやジャンプリストには 48×48 が求められます。1 サイズしか提供しないと、OS がそれを拡大縮小します——そしてその結果は、たいていひどいものです。
ICO ファイルにおける「マルチサイズ」の本当の意味
ICO ファイルは画像ではなく、コンテナです。複数の PNG や BMP フレームをそれぞれの寸法タグ付きで格納する zip アーカイブのようなものだと考えてください。HTML 仕様では、rel='icon' がブラウザがこれらのリソースを発見・要求する標準的な方法として定義されています。
16、32、48 の 3 サイズを 1 ファイルにまとめれば、1 回の HTTP リクエストでブラウザに 3 つの選択肢を与えられます。ブラウザはレンダリングコンテキストに最も近いサイズを選びます。スケーリングもアンチエイリアスも、滲んだピクセルも発生しません。
なぜこの 3 サイズなのか
それぞれの数値は、アイコンが表示される実際の UI サーフェスに対応しています。
- 16×16 — 標準 DPI ディスプレイにおけるブラウザタブとブックマークバー。ユーザーがアイコンを凝視する時間の 90% を占めるサイズです。1 ピクセル単位で品質が問われます。
- 32×32 — Retina / Hi-DPI タブ、Chrome の新規タブページのショートカット、およびほとんどのブックマークメニュー。2× ディスプレイでは、OS がこのフレームをサンプリングしてシャープに表示します。
- 48×48 — Windows のピン留めタスクバー、スタートメニュータイル、デスクトップショートカットのアイコン。Google も検索結果の favicon 表示でこの範囲のフレームを利用します。
16 を省くとタブがぼやけます。32 を省くと Retina タブがぼやけます。48 を省くとデスクトップショートカットがピクセル化します。この 3 つを揃えれば、誰も要求しないフレームにバイトを浪費することなく、もっともよく使われる 3 つのレンダリングコンテキストをカバーできます。
ブラウザがレンダリングサイズを選ぶ仕組み
近年のブラウザは、ICO に複数サイズが含まれている場合、以下の階層に従って選択します。
- link タグを確認し、レンダリングサーフェスに合致する
sizes属性があるかをチェックする。 - ICO コンテナをスキャンし、ターゲットのサーフェスと寸法が正確に一致するフレームを探す。
- 完全一致がなければ、利用可能な最大のフレームを選び、ダウンサンプルする。
- 最後の手段としてニアレストネイバーでスケーリングする。
Chrome と Firefox は Hi-DPI ディスプレイでは利用可能な最大フレームを優先してダウンサンプルします。Safari は文字どおりのピクセル一致を選ぶ傾向があります。そのため、16、32、48 をちょうど含むファイルは、16、24、64 を含むファイルより多くのブラウザでシャープに表示されます——ブラウザがリスケールする必要がほとんどないからです。
16 ピクセル制約のもとでのデザイン
16×16 のアイコンは、ブランドのメッセージを伝えるための 256 ピクセルしか与えてくれません。これは過酷な制約です。コツは、まずシルエット、次に細部は後回し にすることです。
- グラデーションは使わない——このサイズではノイズに変わります。
- 1 ピクセルのストロークを使い、グリッドに揃える（0.5px のサブピクセルレンダリングは避ける）。
- 文字は 1 文字、もしくはシンプルな幾何学マークに留める。
- 目を細めてチェックする——形状が消えるなら、さらにシンプルにする。
32 と 48 のサイズはやや寛容ですが、高精細な別物のイラストではなく、同じアイコンの拡大版に見えるべきです。16×16 のデザインから始めて拡大しましょう。32 版に新しいディテールが必要だと感じたら、おそらく 16 のデザインが初めから疎すぎたのです。
コンテナの構築——実践的なパターン
Mzu favicondl のマルチサイズ ICO ビルダー のような最近のツールの多くは、高解像度 PNG を 1 枚アップロードして、希望のサイズを含むコンテナを書き出せます。最小限の HTML 設定は次のとおりです。
<link rel='icon' href='/favicon.ico' sizes='16x16 32x32 48x48'>
<link rel='icon' type='image/svg+xml' href='/icon.svg'>
<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>sizes 属性はヒントであり必須ではありません——ブラウザは ICO 内の実際のフレームを解析して最適な一致を選びます。これを記述しておくと、バリデータやアクセシビリティツールが意図を確認するのに役立ちます。
避けるべきよくある落とし穴
経験豊富な開発者でも、以下のようなミスをしがちです。
- 32×32 のみを提供する — Retina では問題なく見えますが、標準タブではひどい見た目になります。
- 1 サイズのみの ICO を使う — コンテナ形式の存在意義を台無しにします。
- 48×48 を省く — Windows ピン留めサイトの表示品質が損なわれます。
- フレームを lossy コーデックで圧縮する — ICO のフレームは可逆 PNG または BMP のままにすべきです。
構築後にファイルサイズを削減する方法については、favicon ICO サイズ最適化ガイド もあわせてご覧ください。
全体を整理する
16、32、48 の 3 点セットは任意の組み合わせではなく、もっとも重要な 3 つのレンダリングサーフェス——標準タブ、Hi-DPI タブ、デスクトップタスクバー——に直接対応しています。この 3 サイズを 1 つの ICO にまとめれば、実世界の favicon リクエストのおよそ 95% を 1 回の HTTP 取得でカバーできます。SVG フォールバックをモダンブラウザ用に、iOS 用に Apple Touch Icon を追加すれば、OS が何を求めてきても対応できるサイトアイコンの完成です。