ファビコンのサイズ:本当に必要な寸法のすべて
必要なファビコンのサイズは、ブラウザのタブとブックマーク向けの 16x16 と 32x32 の PNG、iOS の apple-touch-icon 向けの 180x180、そして Android のホーム画面と PWA インストール向けの 192x192 と 512x512 の PNG です。16・32・48 ピクセルのエントリを収めた favicon.ico があれば、/favicon.ico を直接リクエストするものすべてに対応できます。それ以外のサイズはすべて任意で、ほとんどのサイトは一つも用意していません。
なぜ複数のサイズが必要なのか
ブラウザのタブが求めるアイコンは、おおよそ幅 16〜32 ピクセルです。Android のホーム画面は 192 を求めます。PWA のスプラッシュ画面は 512 を求めます。これらは同じ絵を拡大縮小したものではありません。16 ピクセルではマークが使える画素はおよそ 256 個しかなく、そこで通用するものは、512 で見栄えするものよりはるかに単純でなければなりません。
複数のサイズを宣言しておくと、ブラウザは最も近いものを選んでそこから拡大縮小します。大きなアイコンだけを宣言すると、あらゆる小さな表示面がそれを縮小するため、タブの中で灰色のにじみになります。小さなものだけを宣言すると、あらゆる大きな表示面が拡大するため、ホーム画面のアイコンがぼやけます。
主要なファビコンのサイズ
| サイズ | 用途 | 優先度 |
|---|---|---|
| 16x16 | アドレスバー、旧来のブラウザ、ブックマーク | 必須 |
| 32x32 | ブラウザのタブ、モダンブラウザ | 必須 |
| 96x96 | デスクトップのショートカット、Windows タイル | 任意 |
| 192x192 | Android のホーム画面、PWA アイコン | 必須 |
| 512x512 | スプラッシュ画面、高解像度アイコン | 必須 |
その数字が実際にどう見えるか





Apple Touch Icon のサイズ
| サイズ | デバイス |
|---|---|
| 57x57 | iPhone(非 Retina) |
| 60x60 | iPhone(Retina) |
| 72x72 | iPad(非 Retina) |
| 76x76 | iPad(Retina) |
| 114x114 | iPhone(Retina) |
| 120x120 | iPhone(Retina HD) |
| 144x144 | iPad(Retina) |
| 152x152 | iPad(Retina HD) |
| 180x180 | iPhone(Retina HD)主要サイズ |
ファイルの置き場所
- 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 を出荷するコストは、ぼやけたホーム画面アイコンより小さいものです。