Favicon Tools検証作成
Reference

ファビコンのサイズ:本当に必要な寸法のすべて

必要なファビコンのサイズは、ブラウザのタブとブックマーク向けの 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 タイル任意
192x192Android のホーム画面、PWA アイコン必須
512x512スプラッシュ画面、高解像度アイコン必須

その数字が実際にどう見えるか

Example favicon at 16 by 16 pixels
16px
Example favicon at 32 by 32 pixels
32px
Example favicon at 48 by 48 pixels
48px
Example favicon at 96 by 96 pixels
96px
Example favicon at 180 by 180 pixels
180px
表示用に拡大せず、実際のピクセル寸法です。ほかを出荷する前に、自分のマークを 16px で確認してください。

Apple Touch Icon のサイズ

サイズデバイス
57x57iPhone(非 Retina)
60x60iPhone(Retina)
72x72iPad(非 Retina)
76x76iPad(Retina)
114x114iPhone(Retina)
120x120iPhone(Retina HD)
144x144iPad(Retina)
152x152iPad(Retina HD)
180x180iPhone(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 を出荷するコストは、ぼやけたホーム画面アイコンより小さいものです。

関連用語