ファビコンダークモード：ライトとダークに対応するアダプティブアイコン（2026年）

ダークなファビコンはライトなブラウザタブでは美しく見え、ダークなタブでは消えてしまいます。解決策はアダプティブファビコンです。ライトモード用とダークモード用のアイコンを用意します。このガイドでは、SVGメディアクエリの手法、theme-color メタタグ、古いブラウザ向けのJSフォールバックを紹介します。

SVGメディアクエリの手法（推奨）

SVGファビコンには、prefers-color-scheme に応答するCSSを埋め込めます。ブラウザがユーザーのOSやブラウザのテーマに基づいて自動的に適切な色を選びます。 JavaScriptは不要です。

次のような favicon.svg を作成します。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    @media (prefers-color-scheme: dark) {
      .bg { fill: #1a1a1a; }
      .logo { fill: #ffffff; }
    }
    .bg { fill: #ffffff; }
    .logo { fill: #1a1a1a; }
  </style>
  <rect class="bg" width="32" height="32" rx="6" />
  <path class="logo" d="M8 16 L16 8 L24 16 L16 24 Z" />
</svg>

次にHTMLで宣言します。

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

ライトなタブではアイコンは白地にダークで描画され、ダークなタブではダーク地にライトに反転します。ブラウザが瞬時に切り替えを処理します。

Safariの注意点： Safari 26（2025年）でようやくSVGファビコンが描画されるようになりましたが、その中のメディアクエリは無視されます。ダークモード版はSafariでは切り替わりません。これはWebKitバグ #309949として追跡されています。診断と回避策は Safariでダークモードファビコンが機能しない？ → をご覧ください。そして常にPNG/ICOフォールバックを提供してください。SVG vs PNGガイドを参照してください。

theme-colorメタタグ

ダークモード対応と合わせて、2つの theme-color メタタグでブラウザChromeの色も設定しましょう。

<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1a1a1a">

これはモバイルのSafariとChromeでブラウザタブ/ツールバーの背景を着色し、アダプティブファビコンを補完します。

古いブラウザ向けJSフォールバック

SVGメディアクエリを扱えないブラウザをサポートする必要がある場合は、 JavaScriptと matchMedia で2つのPNGファビコンを切り替えられます。

function setFavicon() {
  const dark = window.matchMedia('(prefers-color-scheme: dark)').matches
  const icon = document.querySelector("link[rel='icon']") as HTMLLinkElement
  if (icon) {
    icon.href = dark ? '/favicon-dark.png' : '/favicon-light.png'
  }
}

setFavicon()
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', setFavicon)

これはどこでも機能しますが、2つのPNGと小さなスクリプトの配布が必要です。可能であればSVGアプローチを優先してください。

アダプティブファビコンのデザインのコツ

塗りではなく輪郭線を使う。 輪郭のロゴはどんな背景でも読めるため、塗りつぶしの形状よりも適応性が高いです。
両モードでテストする。 OSをライトとダークで切り替え、両方のブラウザタブを確認しましょう。
純白や純黒の塗りを避ける — オフホワイト（#f5f5f5）や準黒（#1a1a1a）の方が柔らかく見えます。
SVGを小さく保つ。 インラインCSSはバイトを追加するため、パスはシンプルに。

SVGファビコンのブラウザサポート

2025年9月のBaseline変更に基づく更新です。Safari 26はSVGファビコンを描画するようになりましたが、そのメディアクエリには対応していません。

ブラウザ	SVGファビコン	SVG内のメディアクエリ
Chrome（デスクトップとAndroid）	✅	✅
Firefox	✅	✅
Edge	✅	✅
Safari 26+（デスクトップ）	✅（2025年に新規対応）	❌ WebKitバグ #309949
iOS Safari	❌（apple-touch-iconを使う）	❌

結論：モダンブラウザ向けにSVGを、それ以外すべてにPNG/ICOフォールバックを提供し、 Safariのダークモードサポートが対象ユーザーに重要なら、下記のJS切り替えを使いましょう。

完全なダークモードファビコン設定

<!-- Adaptive SVG for modern browsers -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- PNG fallbacks -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- iOS -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Browser chrome color -->
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1a1a1a">