ファビコンはもう1枚の画像ではありません。ブラウザ、スマホ、OSがそれぞれ別々の枠に別々のサイズを掴みます。ブラウザのタブ、ブックマーク、iOSのホーム画面、Androidのアプリスイッチャー。32×32のPNGを1枚出せば、タブでは動きますが、誰かがサイトをスマホに保存するとぼやけて見えます。フルセットを出せば、あらゆる場所が鮮明なアイコンを得ます。
必要なサイズはどれか、それぞれが何をするのか、そしてなぜ一覧がこういう見た目なのかを、正確に紹介します。
大事なサイズ
ほとんどのサイトは、6つのPNGサイズとレガシーの.icoでまかなえます。参照はこちら。
| サイズ | 形式 | 使われる場所 |
|---|---|---|
| 16×16 | PNG（.ico内） | ブラウザのタブ、アドレスバー、ブックマーク |
| 32×32 | PNG（.ico内） | Retinaのタブ、Windowsタスクバーのショートカット |
| 48×48 | PNG | Windowsのサイトアイコン、一部のAndroidの場所 |
| 180×180 | PNG | iOSのホーム画面（apple-touch-icon） |
| 192×192 | PNG | Androidのホーム画面、PWAのインストール |
| 512×512 | PNG | PWAのスプラッシュ画面、アプリストア、高DPI |
favicon.icoファイルは、小さいサイズ（たいてい16と32、ときに48）をまとめるコンテナです。古いブラウザとWindowsはサイトのルートで名前を頼りにこれを探すので、現代のブラウザが喜んでPNGを使うとはいえ、出す価値はまだあります。
なぜこんなに多いのか？手早く一巡
一覧が長い理由は、アイコンが大きく異なる物理サイズで現れるからです。
16と32は日常のタブのアイコンです。16が定番のサイズで、32は16ではやわらかく見える高DPI（「Retina」）画面をカバーします。ブラウザはピクセル密度に合う方を選びます。
48はWindowsのもので、サイトのショートカットに使われ、32ではうまくカバーできない数箇所でより鮮明に現れます。
180はAppleのapple-touch-iconです。iPhoneやiPadで誰かが「ホーム画面に追加」をタップすると、iOSはこれを使います。間違えると、iOSは縮小したスクリーンショットを掴むか、素っ気ない文字のタイルを表示します。どちらもあなたのブランドには見えません。
192と512はプログレッシブウェブアプリのサイズで、manifest.webmanifestファイルで宣言されます。192はAndroidのホーム画面のアイコン、512はスプラッシュ画面に供給され、OSが必要とする他のもののために縮小されます。サイトがインストール可能なら、この2つは譲れません。
512より大きいものは必要？
いいえ。512×512はウェブのファビコンの実用的な天井です。webmanifestの仕様とあらゆる主要プラットフォームがそのあたりで頭打ちになります。元の絵が1024以上なら、出発点の画像としては結構です（縮小するディテールが多い）が、1024のファビコンは出しません。512を超えるものは、誰も使わないバイトを足すだけです。
上へ向かうときに大事な唯一のルール。大きく正方形の元画像から始めること。512×512か1024×1024の元は、その下のあらゆるサイズにきれいに縮小されます。小さな画像から始めると、保つべきディテールがそもそもなかったので、小さいサイズが濁って見えます。
16×16を生き延びるようにデザインする
最も難しいサイズは最も小さいものです。16×16では、詳細なロゴが読めない汚れになります。サイトを問わず通用するコツ。
- 簡素化する。 完全なワードマークは16pxで読めません。1文字、モノグラム、あるいはマークの最も見分けやすい部分を使いましょう。
- コントラストを高く保ち、明るいタブと暗いタブの両方の背景で形が判読できるように。
- 少し余白を残す。 四辺すべてに触れるアイコンはタブで窮屈に感じます。
- 小さく試す。 ブラウザを縮小するか、実際のタブを見ましょう。ひと目で何か分からないなら、さらに簡素化します。
セット全体を生成する
これらは手で作りません。1枚の正方形画像をファビコンジェネレーターに放り込めば、フルセットを一度に生成します。favicon.ico、16/32/48/180/192/512のPNG、すぐ使えるwebmanifest、そして貼り込む正確なHTMLの<head>スニペット。すべてブラウザ内で動きます。画像は決してアップロードされず、初回アクセスのあとツールはオフラインで動きます。
最終的に手にするHTML
参考までに、完全なファビコンの設定は<head>でおおよそこう見えます。
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
ジェネレーターがこれを書いてくれるので、そのまま貼り込めます。6つのサイズと.ico、そしてマニフェストをカバーすれば、あらゆるブラウザ、スマホ、OSが求める鮮明なアイコンを得ます。