2025年版ファビコン(Favicon)完全ガイド：推奨フォーマット・サイズ・実装方法

ブラウザのタブに表示される16x16ピクセルの小さな正方形、ファビコン(Favicon)。
小さいながらも、ウェブサイトの第一印象を決める非常に重要な要素です。

ユーザーが数十個のタブを開いているときにあなたのサイトを識別しやすくし、サイトの信頼性を高め、クリック率(CTR)を向上させることで間接的にSEOにも貢献します。

しかし、2025年現在、ファビコンの実装は意外と複雑になっています。
「まだ .ico を使うべき？」「サイズは32pxだけで十分？」「ダークモードで見えなくなる問題はどうすれば？」

この記事では、最新のウェブ標準に準拠した最もスマートで完璧なファビコン実装方法を解説します。

1. フォーマット戦争：ICO vs PNG vs SVG

古典的な標準：`.ico`

長年、favicon.ico はウェブの標準でした。1つのファイル内に16x16、32x32など複数の解像度を格納できる独自のコンテナフォーマットです。

メリット： IEを含むあらゆるレガシーブラウザをサポート。
デメリット： PNGに比べて作成が手間で、ファイル管理が面倒。

現代の標準：`.png`

現在はPNGが主流です。アルファチャンネル（透明度）を完全にサポートし、作成も容易です。

メリット： 高画質、作成が簡単。
デメリット： サイズごとに個別のファイルを用意する必要がある。

未来の標準：`.svg`

SVGファビコンは「ゲームチェンジャー」です。ベクター形式なので拡大しても劣化せず、何よりCSSメディアクエリをサポートしています。つまり、ダークモード対応が可能です！

メリット： 無限のスケーリング、ダークモード対応。
デメリット： かなり古いブラウザでは非対応（PNGへのフォールバックが必要）。

2. 必須サイズチェックリスト（これだけ用意すればOK！）

昔のように20種類ものファイルを作る必要はありません。2025年現在、本当に必要なサイズだけを厳選しました。

16x16: デスクトップブラウザのタブ用。
32x32: 高解像度(Retina)ディスプレイおよびタスクバー用。
180x180: Apple Touch Icon（iPhone/iPadのホーム画面追加用）。
192x192: Android Chromeのホーム画面追加用。
512x512: PWA (Progressive Web Apps) のスプラッシュスクリーン用。

3. 完璧なHTML実装コード

2015年頃の古いコードをコピペするのはやめましょう。これが最もクリーンでモダンなHTML実装です。

<!-- 1. モダンブラウザ用 SVG (ダークモード対応！) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- 2. Safariおよびその他のためのPNGフォールバック -->
<link rel="icon" href="/favicon-32x32.png" type="image/png">

<!-- 3. Apple Touch Icon (iPhoneホーム画面) -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- 4. ウェブアプリマニフェスト (Android & PWA) -->
<link rel="manifest" href="/site.webmanifest">

Pro Tip: HTMLに記述しなくても、ルートディレクトリ(/favicon.ico)に .ico ファイルを1つ置いておきましょう。古いボットやツールは依然としてその場所を探しに行きます。

4. SVGでダークモードに完全対応する

これが最新ファビコンの醍醐味です。ユーザーがダークモードを使用している際、黒いロゴが背景に同化して見えなくなった経験はありませんか？
SVGファビコンなら、CSSで色を動的に変更できます。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    path { fill: #000; } /* デフォルト (ライトモード) */
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; } /* ダークモードでは白に変更！ */
    }
  </style>
  <path d="..." />
</svg>

これで、ブラウザのテーマに合わせて色が変化するファビコンの完成です。

5. トラブルシューティング：ファビコンが表示されない場合

ブラウザのキャッシュ: ブラウザはファビコンを強力にキャッシュします。変更が反映されない場合は、シークレットモードで開くか、ファイル名の後ろにクエリパラメータ(?v=2)を付けてみてください。
パスの間違い: パスは常にルート(/)からの絶対パスで記述するのが安全です。
Google検索結果: Googleの検索結果にファビコンが表示されるまでには数週間かかることがあります。また、Googleは48pxの倍数(48, 96, 144...)のサイズを推奨しています。

おわりに

ファビコンが壊れていたり、デフォルトのアイコンのままだったりすると、「作りかけのサイト」という印象を与えてしまいます。
たった10分の作業で正しく設定するだけで、ユーザーに与える信頼感は大きく変わります。

ロゴファイル1つで、これら全てを一括生成したいですか？
Pockitの ファビコン生成ツール (Favicon Generator) を使ってみてください。ICO, PNG, マニフェストファイルまでを一瞬で生成し、ブラウザやGoogle検索結果でのプレビューも確認できます。

1. フォーマット戦争：ICO vs PNG vs SVG

古典的な標準：.ico

現代の標準：.png

未来の標準：.svg