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

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

ファビコンは、16×16のICOを置くだけの仕組みではなくなりました。現在はブラウザタブ、ブックマーク、ショートカット、スマートフォンのホーム画面、インストールしたPWAなど、表示先ごとに形式とサイズが異なります。実用的な構成では、一つの画像に頼らず複数の形式を組み合わせます。

現在のブラウザ対応

Chrome・Edge

• SVG、PNG、ICO
• SVGによるダークモード対応
• インストールしたPWA向けのmanifestアイコン
• アニメーションファビコンは限定的で、動作は一定ではありません

Firefox

• SVG、PNG、ICO
• ダークモード対応
• 複数解像度を収録したICO

Safari

• 現行版でのSVGに加え、PNGとICO
• iPhone・iPadのホーム画面用apple-touch-icon
• 一部バージョンのピン留めタブで使われるmask-icon

古いブラウザ

古いブラウザやショートカットにも対応するなら、16×16、32×32、48×48を収録したfavicon.icoを残しておくと安心です。

おすすめのファイル構成

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

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

SVGは画面密度にかかわらず鮮明で、OSの配色に応じて色を変更できます。

<svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
  <style>
    path { fill: #000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; }
    }
  </style>
  <path d="..." />
</svg>

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

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

タブとブックマークには16×16と32×32を使います。ほかの表示先には専用ファイルを用意してください。Apple Touch Iconは180×180、PWAでは少なくとも192×192と512×512をmanifestへ登録します。

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

<link rel="icon" href="/favicon.ico" sizes="any">

ICOは複数解像度を一つにまとめられます。公開ルートへ置けば、/favicon.icoを自動的に探すクライアントにも対応できます。

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

Apple

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

Apple Touch Iconには正方形で、できるだけ不透明なPNGを使います。角丸は表示時にシステムが適用するため、画像自体へ描き込まないでください。

Android・PWA

manifest.jsonでは通常アイコンとマスカブルアイコンを分けて指定します。

{
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

マスカブルアイコンでは、重要な部分をセーフエリア内へ収めます。ランチャー側で円形、スクワークル、角丸四角形などに切り抜かれるためです。

Windows

ショートカットまで広く対応するにはICOが有効です。既存プロジェクトでWindowsタイルを個別に設定している場合はbrowserconfig.xmlも利用できますが、すべてのサイトに追加する必要はありません。

表示速度とキャッシュ

• PNGは寸法を変えずに圧縮します。
• SVGやPNGから不要なメタデータを除きます。
• HTMLへ大量のサイズを並べず、実際に使うファイルだけを指定します。
• ファイル名とURLはできるだけ安定させます。
• 通常、ファビコンのpreloadは不要です。ブラウザはheadから早い段階で検出します。

ダークモード

色だけを切り替えるなら、prefers-color-schemeを含むSVGが簡単です。別ファイルに分ける場合はmedia属性も使えます。

<link rel="icon" href="/favicon-light.svg" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)">

明るい背景と暗い背景の両方で実寸表示を確認してください。サイトのヘッダーで見やすいロゴでも、小さなタブではコントラストが足りない場合があります。

よくある問題

ぼやけて表示される

表示サイズに合う画像が配信されているか確認します。16×16のPNGを大きな用途へ引き伸ばさず、SVGまたは十分な解像度の画像から書き出してください。

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

まずファイルのURLを直接開き、新しい画像が配信されているか確認します。続いてブラウザとCDNのキャッシュ、Service Worker、HTMLやフレームワークのメタデータに残った重複指定を調べます。

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

細すぎる線や低いコントラストを避けます。SVGならテーマ別の色を用意し、PNG・ICOならどちらの背景でも判別できる配色を選びます。

端末によって色が違う

ラスター画像はsRGBで書き出し、実機でも確認してください。ディスプレイやOSによってカラープロファイルの扱いが異なる場合があります。

確認用チェックリスト

1. Chrome、Firefox、Safari、Edgeでサイトを開く。
2. 通常タブ、ピン留めタブ、ブックマーク、履歴を確認する。
3. ライトモードとダークモードを切り替える。
4. iOSとAndroidでホーム画面へ追加する。
5. PWAの場合はインストールし、ランチャーでの切り抜きを確認する。
6. キャッシュの影響を切り分けるため、プライベートウィンドウや新しいプロファイルでも試す。

headの設定例

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

すべての表示先を一つのファイルでカバーすることはできません。現行ブラウザ向けのSVG、明示的なサイズのPNG、フォールバック用ICO、Apple Touch Icon、PWA用画像を用途別に用意するのが現実的です。

ファビコン作成ツールで一式を生成し、公開後はファビコンチェッカーで設定を確認できます。