ブラウザやデバイスが実際に必要とするファビコンのサイズ

以前、ファビコンといえば1つの小さな16×16の画像を意味していた。今では、ブラウザタブ、スマートフォンのホーム画面のショートカット、ブックマークバー、Appleタッチアイコンがそれぞれ独自のサイズを期待しており、1つだけ提供すると、それらの状況の一部はぼやけて見えるか、自分のアイコンの代わりに汎用のフォールバックアイコンが表示されてしまう。

1つのサイズだけでは十分でない理由

180×180のホーム画面アイコンのスロットを埋めるために拡大された16×16のアイコンは、大きく引き伸ばされたどんな小さな画像とも同じくらいブロック状に見える——ソースになかったディテールを追加する方法はない。ファビコンが表示される各コンテキストにはそれぞれ期待される解像度があり、現代の慣行は、ブラウザが1つの小さなファイルを下手に拡大することに頼るのではなく、一連のサイズを提供することだ。

カバーする価値のあるサイズ

• 16×16と32×32——ほとんどのデスクトップブラウザでブラウザタブやブックマークリストに使われる、古典的なファビコンサイズ。
• 180×180——ページがiPhoneやiPadのホーム画面に追加されたときの、Appleが期待するホーム画面アイコンのサイズ。
• 192×192と512×512——Androidと、インストール可能なウェブアプリのホーム画面アイコンやスプラッシュ画面用のウェブアプリマニフェストで使われる。

16pxでもデザインを判読可能に保つ

ファビコンジェネレーターは1つのソース画像を受け取り、完全にブラウザ内で一度に標準サイズの完全なセットを生成する——しかし、そもそも小さいサイズで機能しないデザインは、どんなジェネレーターでも修正できない。細かいディテール、細い線、小さなテキストは16×16では完全に消えてしまう。縮小しても認識可能なままのシンプルで太い形状や文字こそが、そこから何個のサイズが生成されようとも、ブラウザタブで実際にはっきりと読み取れるものだ。