実際に使えるファビコンのサイズと形式

今も複雑な理由

ファビコンは、ウェブ資産の中でも特に長く複雑な歴史を持ちます。1999年に、Internet Explorerが次の場所を探す1枚の16×16 .icoファイルとして始まりました： /favicon.ico、HTMLタグは不要です。その後に登場したiOSのホーム画面アイコン、Androidのアダプティブアイコン、Windowsのタイルへのピン留め、PWAマニフェストなど、すべてのプラットフォームは、古い方式を置き換えるのではなく独自の規約を上乗せしました。元の動作を壊すと、既存のすべてのウェブサイトが動かなくなるためです。その結果、仕様は整理されず拡張されるだけになり、ウェブ上に出回るサイズ一覧の多くは、これらの拡張機能が実際に今より重要だった時代のものをコピーしたままです。

最新ブラウザーは、渡されたものを扱う能力も大きく改善しています。Chrome、Firefox、Safariはすべて、1つの拡大縮小可能なアイコンから、小さいタブサイズの表示を生成できます。長いチェックリストは古い環境への保険で、現在の必須要件ではありません。一般的なサイトでは、大半を省略しても安全です。

実際の利用をカバーするセット

実際には、3ファイルで圧倒的多数のブラウザーと端末をカバーできます：

• 32×32画像を含むfavicon.ico — 今も全ブラウザーが標準でサイトルートを確認する代替です。次がなくても <link> タグが存在します。.ico形式は技術的には複数解像度を保持できますが、現在のブラウザー用途では内部の32px画像1枚で十分です。
• apple-touch-iconとして使う180×180のPNG — ユーザーがサイトをホーム画面へ追加するときiOSが使います。この用途でfavicon.icoは一切読まず、ない場合はページのスクリーンショットを使うため、ホーム画面アイコンとして明らかに劣ります。
• SVGのファビコン — 任意のタブ寸法・ピクセル密度へ鮮明に拡大縮小し、下記のダークモードメディアクエリにも対応。SVGと.icoの両方を宣言すると、現在のブラウザーはSVGを優先します。

文書のheadでは、次のとおりです。

この3つ以外の512pxのPWAアイコン、Androidのアダプティブアイコンの種類、Windowsのタイル用メタタグは、インストールできるPWAを作る場合や、特にWindowsのタイルへのピン留めを対象とする場合にだけ重要です。先回りでなく、その要件が実際にあるときに追加してください。

このセットのラスター部分を手で作るには、同じ画像を複数サイズで書き出し、.icoにまとめる必要があります。当サイトの ファビコン生成 1枚の元画像から行います。favicon.ico、180pxのapple-touch-icon、マニフェストが必要な場合の192・512 PNGです。SVGは引き続きベクターツールから用意してください。

各プラットフォームが実際に要求するもの

• デスクトップブラウザーのタブ アイコンを約16×16 CSSピクセルで描き、高DPIでは拡大します。ここでは大きい元画像よりSVGや適切な小PNGが重要な理由です。タブはアイコンの最小で最もよく見られる表示です。
• iOSホーム画面 180×180のapple-touch-iconを要求します。現在の最高密度iPhoneをカバーし、古い端末では縮小します。iOSは角丸と、一部バージョンでは微かな光沢も自動適用します。二重に丸められるため、元画像の角を先に丸めないでください。
• Androidのホーム画面 / PWA サイズを次から読みます： site.webmanifest linkタグではなく、通常は192×192と512×512です。円、角丸正方形、涙形などの可変アイコンがデザインを切らないよう、安全余白付きの「maskable」版にも対応します。
• 検索結果 （特にGoogleでは）検索結果の項目の横に小さなファビコンが表示されます。ブラウザーのタブアイコンと同じ方法で取得され、表示サイズも同程度の小ささです。

site.webmanifestの用途

A site.webmanifest サイトをインストール可能なアプリとして記述する小さなJSON文書です。名前、テーマ色、背景色、宣言した寸法のアイコン一覧を含みます。Androidで「ホーム画面に追加」を、ブックマークのショートカットから、本物のアプリアイコンらしい見た目と起動へ変えます。PWAを作らずインストール性も不要なら完全に省略でき、上記3ファイルだけの通常サイトでも問題ありません。追加するなら、次でリンクします： <link rel="manifest" href="/site.webmanifest"> JSON内ではアイコンを絶対パスで参照してください。

16pxでも読み取れるデザイン

ブラウザーのタブアイコンは非常に小さく、ファビコンのデザインの多くが失敗する理由はファイル形式ではなく、元画像を実際の表示サイズで確認していないことです。ワードマーク、細い線、いくつもの帯が見えるグラデーションなど、512pxでははっきり見える細部も、16pxでは灰色の塊になります。

• 1つの主要な形や字形に絞ってください。太い1文字やアイコンのシルエットは縮小に耐えますが、複数要素の細かいロゴは耐えません。
• コントラストを上げ、色を単純にしてください。小さいサイズでは、1つの平均的な色へ濁りがちなグラデーションより、2〜3の単色のほうが読み取りやすくなります。
• 細い線を太くします。原寸では問題ない極細線でも、16pxのグリッドにアンチエイリアス付きで縮小すると完全に消えることがあります。
• 完成画像の原寸を見て小さくしても大丈夫だと考えるのではなく、実際に出力を16pxへ縮小して確認してください。これはファビコン設計で最も省略されがちな手順です。

ダークモード

ブラウザーのタブバーやOSの枠部分は、システムテーマによって暗くも明るくもなるため、明るい背景だけを想定したファビコンは、暗いタブバーで見えなくなることがあります。その逆も同様です。SVGのファビコンは、次を使って直接対応できます prefers-color-scheme SVG内のstyleブロックのメディアクエリで、ユーザーのテーマに応じて塗り色を切り替えます。PNG・ICOは静止画像なのでできません。ダークモード対応が重要ならSVGは任意ではなく、実現できる唯一の形式です。

そこまでしなくても、白と黒に近い背景の両方で十分なコントラストを持つファビコンを選べば、余分な複雑さを加えず、ほとんどの場合に十分対応できます。通常は、黒一色や白一色の塗りに頼るのではなく、細い縁取りや中間色を加えます。

ファビコンが更新されない理由と対策

ファビコンは異常に強くキャッシュされます。ブラウザーは事実上静的なものとして扱い、ページ自体を強制再読み込みした後でも、数日や数週間、古いアイコンを表示し続けます。スクリプトやスタイルシートとは違い、ファビコンの取得は通常のページキャッシュの無効化に連動しないためです。確実に直す方法は3つあります。

1. ファイル名を変更するか、バージョンのクエリ文字列を追加してください — /favicon.ico?v=2 または次に改名： /favicon-v2.ico URL自体が変わるため、新しいリクエストを強制します。
2. ブラウザーのファビコン専用キャッシュを消去してください。Chromeでは一般的なキャッシュ消去とは別です。chrome://favicon-internalsを使うか、閲覧データの削除で「キャッシュされた画像とファイル」を対象に含めてください。
3. 時間を置いてください。URLを変えても、一部のブラウザーや検索エンジンは独自の予定でファビコンを再巡回・再キャッシュします。特に検索結果のファビコンは、公開サイトより数日遅れる場合があります。

よくある質問