ファビコンのサイズ：本当に必要な寸法のすべて
必要なファビコンのサイズは、ブラウザのタブとブックマーク向けの 16x16 と 32x32 の PNG、iOS の apple-touch-icon 向けの 180x180、そして Android のホーム画面と PWA インストール向けの 192x192 と 512x512 の PNG です。16・32・48 ピクセルのエントリを収めた favicon.ico があれば、/favicon.ico を直接リクエストするものすべてに対応できます。それ以外のサイズはすべて任意で、ほとんどのサイトは一つも用意していません。
本当に必要なサイズ
| サイズ | 用途 | 残す? |
|---|---|---|
| 16, 32, 48 | ブラウザのタブとブックマーク、favicon.ico内にまとめて格納 | 残す |
| 180x180 | iOSのホーム画面用のapple-touch-icon | 残す |
| 192x192 | Androidのランチャーアイコン、manifestに記載 | 残す |
| 512x512 | PWAのスプラッシュとインストールプロンプト、manifestに記載 | 残す |
| SVG | どのサイズでも鮮明なタブアイコン、ダークモードにも対応可能 | 任意 |
なぜ複数のサイズが必要なのか
ブラウザのタブが求めるアイコンは、おおよそ幅 16〜32 ピクセルです。Android のホーム画面は 192 を求めます。PWA のスプラッシュ画面は 512 を求めます。これらは同じ絵を拡大縮小したものではありません。16 ピクセルではマークが使える画素はおよそ 256 個しかなく、そこで通用するものは、512 で見栄えするものよりはるかに単純でなければなりません。
複数のサイズを宣言しておくと、ブラウザは最も近いものを選んでそこから拡大縮小します。大きなアイコンだけを宣言すると、あらゆる小さな表示面がそれを縮小するため、タブの中で灰色のにじみになります。小さなものだけを宣言すると、あらゆる大きな表示面が拡大するため、ホーム画面のアイコンがぼやけます。
その数字が実際にどう見えるか
配信をやめるべきサイズ
| サイズ | かつての用途 | 残す? |
|---|---|---|
| 57, 60, 72, 76 | iOS 6や古いiPad向けのapple-touch-icon | 削除 |
| 114, 120, 144, 152 | 古いiPhoneやiPad向けのRetina apple-touch-icon | 削除 |
| 70, 150, 310 | browserconfig.xml経由のWindowsタイルアイコン | 削除 |
| 160, 196 | 各種の古いAndroidやChromeのショートカットサイズ | 削除 |
ファイルの置き場所
- public/
- favicon.ico16, 32 and 48 in one file
- favicon-16x16.pngAddress bar
- favicon-32x32.pngBrowser tabs
- favicon-96x96.pngDesktop shortcuts
- apple-touch-icon.png180x180, iOS home screen
- icon-192.pngAndroid home screen
- icon-512.pngPWA splash screen
- manifest.jsonLists the PWA icons
public のルート直下にフラットに置くのが慣例です。これらのうちいくつかは、link タグを介さずにパスで直接リクエストされるためです。
ファビコンのサイズに関するよくある質問
ファビコンのサイズの最小セットは？
16 と 32 を収めた favicon.ico、180x180 の apple-touch-icon.png、そして Web アプリマニフェストに記載する 192x192 と 512x512 の PNG です。この 5 ファイルで、デスクトップブラウザ・iOS のホーム画面・Android・PWA インストールをカバーできます。
iOS のために 57x57 や 72x72 はまだ必要ですか？
ごく古い iPhone や iPad をサポートする場合だけです。現行の iOS は 180x180 の apple-touch-icon を使い、より小さいものが必要なところでは縮小するので、ほぼすべてのサイトで 180 が一つあれば十分です。
大きなファビコンはページを遅くしますか？
実質的には遅くしません。アイコンは数キロバイト単位の小さな PNG で、ブラウザは必要なサイズだけをリクエストし、しかも強くキャッシュされます。使わない 512 を出荷するコストは、ぼやけたホーム画面アイコンより小さいものです。
Windowsタイルアイコンを配信すべきですか?
いいえ。70、150、310のタイルサイズとbrowserconfig.xmlは、廃止されたWindowsのライブタイルを対象にしていました。削除しましょう。
1つのfavicon.icoに複数のサイズを収められますか?
はい。.icoフォーマットは16、32、48を1ファイルに収めるコンテナです。ブラウザはその中から必要なサイズを選びます。