ブラウザ別ファビコン最適化ガイド

ファビコンは1ファイルでは足りない

タブ、ブックマーク、Google検索結果、iPhoneのホーム画面では、異なるアイコン指定が使われることがあります。タブに表示できても、ほかの場所まで設定済みとは限りません。実際の出力ファイルを使い、サイトに必要な表示場所を確認してください。

現在のブラウザ対応

WebKitのSafari 26.0リリースノートにSVGアイコンの追加が記載されています。旧稿の「通常のSVG faviconはSafari 16.4から対応」という説明は基準にできません。通常アイコン・固定タブのマスク・ページ内画像は別の機能です。表はテストの観点で、全バージョンの同一表示を保証しません。

Chrome・Edge

タブ・ブックマーク・インストール後を別々に確認します。小さいICO/PNGを基本に、対象に応じてSVGやmanifestを追加してください。

Firefox

プロジェクトの対象バージョンで形式・サイズ・テーマを確認し、必要ならラスターを残します。

Safari

WebKitはSafari 26.0でSVGアイコンを追加しています。旧稿のSafari 16.4という通常faviconの基準は使わず、実際のバージョンと表示場所で確認してください。

古いブラウザ

対象環境に応じてICO/PNGを用意します。全バージョンで同一の表示は保証しません。

おすすめのファイル構成

実際に公開したファイルだけを指定します。

1. 現行ブラウザ向けのSVG

ベクター画像の明暗配色を設定するなら SVG Faviconを使ってください。対象ブラウザや表示場所が必要とするPNG・ICOも用意します。ページ内SVGの表示対応はSVG faviconへの対応を証明しません。通常のfaviconとSafariの固定タブ用マスクアイコンも別の機能です。

古いバージョン表だけで形式やアニメーションへの対応を断定せず、実際にサポートするバージョンで確認します。鮮明なベクターでも、細部が16pxで読めるとは限りません。

2. 表示が予測しやすいPNG

Favicon Generatorは複数サイズのICO、小さいPNG、180pxのApple Touchアイコンを出力します。サンプルZIPは同じ処理で作成しており、ログインせずに確認できます。以下ではサイトのルートにファイルを置きます。

<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

/icons/ に置く場合はURLも変更します。このツールのICOには16・32・48pxが入り、PNGはそれぞれ1サイズです。Apple Touchはサイトのショートカット用で、iOSアプリのアセットカタログとは異なります。

3. フォールバック用のICO

サンプルICOには16・32・48pxのPNGフレームが入っています。実ファイルを確認してください。PNGの拡張子を変えるだけではICOに変換されません。

プラットフォーム別の設定

対象環境で各表示場所を確認します。

Apple

対象のホーム画面用に apple-touch-icon を指定し、不透明な背景を決め、外形は端末に適用させます。ネイティブiOS素材は別の作業です。Safariの固定タブ用マスクが必要なら、カラーfavicon SVGの名前を変えるのではなく、用途に合う単色素材を用意してください。

Android・PWA

ランチャー用画像はmanifestの icons に指定します。192px・512px PNGを rel="icon" に書くだけでは代用できません。通常版とmaskable版の構図や円形安全領域はPWAガイドで確認できます。

Windows

タブ・ブックマーク・インストール後のショートカットを分けて確認します。旧式タイルや browserconfig.xml は、対象機能を使い、実ファイルがある場合に追加してください。現在のすべてのEdge環境で必須ではありません。

表示速度とキャッシュ

ファイル容量を減らす前に図稿を整理し、小さいラスターを確認します。PNGに一律の「品質70〜80%」設定はなく、写真を埋め込んだSVGは単純なPNGより大きいこともあります。元画像を保管し、最適化したコピーを16px・32pxで比較してください。

レスポンスヘッダー、CDN、service workerのキャッシュを分けて確認します。検索用faviconのURLは安定させ、再クロールを狙って何度も改名しないでください。ブラウザ用アイコンを更新するときは宣言と画像を同時に公開し、キャッシュ済みページが使う旧ファイルも当面残します。計測上の必要がない限り全アイコンを先読みしません。

ダークモード

自己完結したSVGでは prefers-color-scheme を使えます。次のオリジナル例を favicon.svg として保存・公開するか、SVG Faviconで配色を設定してください。画像生成ツールのサンプルZIPはラスターを出力するため、SVGの宣言を加えるだけではファイルは作られません。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    .background { fill: #ffffff; }
    .mark { fill: #172554; }
    @media (prefers-color-scheme: dark) {
      .background { fill: #172554; }
      .mark { fill: #ffffff; }
    }
  </style>
  <rect class="background" width="100" height="100" rx="20" />
  <circle class="mark" cx="50" cy="50" r="25" />
</svg>

<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/svg+xml" sizes="any" href="/favicon.svg">

これは例示用の構成で、ブラウザに固定のフォールバック順序を指定するものではありません。候補は属性に応じて選ばれます。iconリンクのリファレンスを参照し、選択URL・両テーマ・ラスターの見やすさを確認します。模擬ダーク表示だけではSVGの読み込みを証明できません。

よくある問題

図稿を作り直す前に、選択ファイルと公開レスポンスを確認します。

ぼやけて表示される

選ばれたファイルと実際のピクセルを確認します。適切な小サイズを用意し、細線も整理してください。寸法を増やしても元画像の失われた細部は戻らず、複雑な形が小さいタブで読めるとは限りません。

古いアイコンから更新されない

1. 指定URLを直接開き、ステータスとコンテンツタイプを確認します。HTMLではなく画像が返る必要があります。
2. 最終HTMLの重複指定や、フレームワークのアイコンファイルによる上書きを確認します。
3. 公開ファイルと確認済みの出力を比較します。
4. CDN、service worker、ブラウザのキャッシュを確認し、新しいプロファイルでも比べます。プライベートウィンドウや強制更新は診断方法で、faviconキャッシュを必ず消す手段ではありません。
5. Favicon Checkerで公開サイトを調べ、対象ブラウザでも確認します。

設置方法は Next.jsガイドと WordPressガイドを参照してください。訂正は運営・お問い合わせへお送りください。

明るいタブまたは暗いタブで見えない

明暗の背景とアクティブ・非アクティブのタブを比較します。図稿を調整するか、対象環境で確認したテーマ対応SVGを使います。大きいプレビューを最終的な小アイコンの代わりにしないでください。

端末によって色が違う

対応する編集ソフトではsRGBへ変換し、元画像を残して対象画面で公開ファイルを比較します。ピクセルを変換せずプロファイルを削除するだけでは、汎用的な解決になりません。

確認用チェックリスト

利用者が使うChrome・Firefox・Safari・Edgeのバージョンで、選択URL・テーマ・表示場所を記録して確認します。必要ならモバイルのホーム画面も試してください。Favicon Checkerは公開ファイルと宣言の確認に役立ち、実際の表示はブラウザと端末で確かめます。

headの設定例

Favicon Generatorは複数サイズのICO、小さいPNG、180pxのApple Touchアイコンを出力します。サンプルZIPは同じ処理で作成しており、ログインせずに確認できます。以下ではサイトのルートにファイルを置きます。

<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

/icons/ に置く場合はURLも変更します。このツールのICOには16・32・48pxが入り、PNGはそれぞれ1サイズです。Apple Touchはサイトのショートカット用で、iOSアプリのアセットカタログとは異なります。

出力したmanifestを使う場合は site.webmanifest と参照画像も公開します。

<link rel="manifest" href="/site.webmanifest">

Googleではトップページの指定と公開ファイルのクロール可否を、最新のfaviconガイドで確認してください。表示や即時更新は保証されません。検索の更新を目的に何度もファイル名を変えることは避けてください。

PWAアイコンはmanifestに指定します。Maskableの円形安全領域は PWAガイドで説明しています。512px PNGだけでPWA全体がインストール可能になるわけではありません。

設置方法は Next.jsと WordPressをご覧ください。訂正は運営・お問い合わせへお送りください。