Back

ウェブサイトにファビコンを追加する方法

OpenReplay Team OpenReplay Team

Nov 23, 2025 · 3 min read

ウェブサイトにファビコンを追加する方法

ウェブサイトにはファビコンが必要です。ブラウザのタブに表示される小さなアイコンは、単なる装飾ではありません。ユーザーが何十個も開いているタブの中から自分のサイトを識別する手段であり、Googleが検索結果にサイトを表示する際の要素であり、iOSがサイトをホーム画面に保存する際の表示方法でもあります。しかし、多くのファビコンガイドは古く、レガシーフォーマットや不要なファイルを推奨しています。

この記事では、あらゆる環境で機能する、モダンで最小限のファビコン設定について説明します:モダンブラウザ向けのfavicon SVG、フォールバック用のfavicon PNG、iOSデバイス向けのApple Touch Icon、そしてProgressive Web Apps向けのweb manifestアイコンです。

重要なポイント

  • モダンなファビコン設定に必要なのは、最小限の必須ファイルのみ:ICOフォールバック、SVGファビコン、32×32のPNG、Apple Touch Icon、そしていくつかのweb-manifestアイコン
  • SVGファビコンは完璧にスケールし、CSSメディアクエリを通じてダークモードをサポート
  • SafariとiOSは現在SVGファビコンを完全にサポートしているため、モダンブラウザの主要アイコンとして使用可能
  • ブラウザの積極的なキャッシュにより、ファビコン更新時にはバージョニング戦略が必要

モダンなファビコンスタック

2015年の何十種類ものアイコンサイズは忘れてください。実際に必要なのは以下です:

必須アイコン

  • favicon.ico (マルチサイズ、通常16×16と32×32) – レガシーフォールバック
  • favicon.svg - すべてのモダンブラウザ向けのスケーラブルアイコン
  • icon-32.png - ブラウザUIとGoogle検索結果用
  • apple-touch-icon.png (180×180) - iOSホーム画面用
  • icon-192.png と icon-512.png - PWA向けweb manifest用

SafariとiOSは現在SVGファビコンを完全にサポートしています。SVGサポートが不足しているという主張は古い情報です—すべての主要ブラウザが現在、SVGファビコンを確実にサポートしています。

HTML実装

<head>に以下の4行を追加します:

<!-- Fallback for legacy browsers -->
<link rel="icon" href="/favicon.ico">

<!-- PNG for browser UI and Google SERPs -->
<link rel="icon" href="/icon-32.png" sizes="32x32" type="image/png">

<!-- Modern browsers (scales cleanly) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- Apple Touch Icon for iOS -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Web manifest for PWAs -->
<link rel="manifest" href="/manifest.json">

注意:rel="shortcut icon"は省略してください—2003年から非推奨です。rel="icon"だけを使用してください。

アイコンの作成

SVGファビコン

SVGファビコンは無限にスケールし、ダークモードなどの機能をサポートします:

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

SVGファビコンはシンプルに保ちましょう。複雑なグラデーションやエフェクトは16×16ピクセルではうまくレンダリングされません。

PNGファビコン

32×32のPNGには2つの重要な目的があります:

  1. SVGをサポートしていないブラウザのフォールバック
  2. Google検索結果での表示

RealFaviconGeneratorやFavicon.ioなどのツールを使用して、SVGからPNGバージョンを生成してください。

Apple Touch Icon

iOSには以下の仕様の180×180 PNGが必要です:

  • 透明度なし(ソリッドな背景を使用)
  • 角丸なし(iOSが自動的に追加)
  • 様々な壁紙で視認性を保つための高コントラスト

正確にapple-touch-icon.pngという名前にして、ルートディレクトリに配置してください。iOSは<link>タグがなくても自動的に見つけますが、明示的にリンクすることで信頼性が確保されます。

Web Manifestアイコン

Progressive Web Appsの場合、manifest.jsonを作成します:

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

これらのweb manifestアイコンにより、Androidでの「ホーム画面に追加」機能とデスクトップPWAインストールが可能になります。

ダークモードサポート

SVGメディアクエリアプローチに加えて、JavaScriptでファビコンを切り替えることもできます:

const favicon = document.querySelector('link[rel="icon"]');
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

function updateFavicon(e) {
  favicon.href = e.matches ? '/favicon-dark.svg' : '/favicon-light.svg';
}

darkModeMediaQuery.addEventListener('change', updateFavicon);
updateFavicon(darkModeMediaQuery);

キャッシュへの対処

ブラウザはファビコンを積極的にキャッシュします。アイコンを更新する際は:

  1. ファイル名にバージョンを付ける: favicon.svgをfavicon-v2.svgに変更
  2. クエリ文字列を追加: favicon.svg?v=2
  3. HTML内のすべての参照を更新

即座にテストするには、シークレット/プライベートウィンドウでサイトを開いてください。

よくある問題

ファビコンが表示されない?

  • パスを確認—相対パスではなく絶対パス(/favicon.svg)を使用
  • MIMEタイプを確認:SVGにはimage/svg+xmlが必要
  • キャッシュを回避するためにシークレットモードでテスト

Retinaディスプレイでぼやける?

  • 主要アイコンとしてSVGを使用
  • PNGエクスポートが正確に32×32と180×180であることを確認

iOSで間違ったアイコンが表示される?

  • iOSはルートディレクトリのapple-touch-icon.pngを優先
  • Safariのキャッシュをクリア:設定 → Safari → 履歴とWebサイトデータを消去

まとめ

モダンなファビコン実装は、レガシーガイドが示唆するよりもシンプルです。5つのファイル—ICO、SVG、PNG、Apple Touch Icon、web manifestアイコン—で、すべてのブラウザ、デバイス、ユースケースをカバーできます。特に必要でない限り、古い何十種類ものアイコンセットやWindowsタイルメタデータは省略してください。

クリーンなSVGファビコンを主要アイコンとして重視し、必須のフォールバックを追加すれば、ブラウザのタブからiOSのホーム画面まで、あらゆる場所でサイトが完璧に表示されます。

よくある質問

SVGファビコンはすべてのモダンブラウザで動作しますが、フォールバックは依然として必要です。レガシーブラウザにはICOファイルが必要で、iOSはホーム画面ショートカット用にapple-touch-icon.pngを必要とし、Google検索結果は特にPNGファビコンを探します。

一部のブラウザは、ダークモードでの視認性のためにファビコンの色を自動的に調整します。この動作を制御するには、SVGファビコンでCSSメディアクエリを使用するか、一貫した外観のためにJavaScriptベースのファビコン切り替えを実装してください。

ファビコンの更新は、ブラウザのキャッシュによって数時間から数日かかる場合があります。ファイル名のバージョニングやクエリ文字列の追加により、即座の更新を強制できます。Google検索結果は、再クロール後でもファビコンの変更を反映するまで数週間かかる場合があります。

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.

OpenReplay

More articles from OpenReplay Blog