「地球儀マーク」のままはNG。ファビコン(Favicon)設定でサイトの信頼性を確保する

たかがアイコン、されどアイコン#

ブラウザのタブ、ブックマーク一覧、スマートフォンのホーム画面、Googleの検索結果...。 Webサイトのシンボルマークとして、あらゆる場所に表示される小さなアイコンが Favicon（ファビコン） です。

サイズはわずか16x16ピクセルや32x32ピクセルですが、その影響力は絶大です。 ファビコンが設定されていない（地球儀マークのままの）サイトは、ユーザーに「作りかけのサイト」「怪しいサイト」「プロフェッショナルではない」という不信感を無意識に与えてしまいます。

ブランディングの第一歩として、正しいファビコン設定を行いましょう。

1. 現代のファビコン実装（SVGの活用）#

かつては .ico 形式のマルチアイコンを作るのが主流でしたが、現在は SVG形式 のファビコンが全モダンブラウザでサポートされています。 SVGなら、拡大縮小しても画質が劣化せず、ファイルサイズも軽量です。

<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">

ダークモード対応

SVGファビコンの最大のメリットは、CSSメディアクエリを使ってダークモード時に色を変えられることです。 「白背景なら黒いロゴ、黒背景なら白いロゴ」といった制御が可能になり、どんな環境でも視認性を確保できます。

<!-- icon.svg の中身 -->
<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>

2. 必要なファイルセット#

2024年現在、最低限用意すべきファイルは以下の3つです。

1. favicon.ico (32x32): レガシーブラウザや一部のツール用（ルートディレクトリに置く）。
2. icon.svg: モダンブラウザ用。
3. apple-touch-icon.png (180x180): iPhone/iPadのホーム画面に追加された時用。背景色をつけた正方形のPNG。

Next.js (App Router) では、src/app フォルダにこれらのファイルを置くだけで、自動的に適切な <link> タグを生成してくれます（Metadata API）。

3. PWAマニフェスト (manifest.json)#

AndroidやデスクトップでPWA（プログレッシブWebアプリ）としてインストールされる場合のために、manifest.json（または site.webmanifest）も用意しましょう。 ここで指定するアイコン（192x192, 512x512）は、スプラッシュ画面やタスクスイッチャーで使われます。

{
  "name": "My App",
  "short_name": "App",
  "icons": [
    {
      "src": "/icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

4. 検索結果への影響#

モバイル版のGoogle検索結果では、サイト名の横にファビコンが表示されます。 ここで独自のロゴが表示されることは、クリック率（CTR）の向上と、ブランド認知に直結します。 Googleは「48pxの倍数の正方形画像」を推奨しています。SVGを用意しておけばこの要件もクリアできます。

「神は細部に宿る」。ファビコンの設定は、サイト運営者の本気度が最も現れるポイントの一つです。