Safariでダークモードファビコンが機能しない？WebKitバグと回避策

アダプティブファビコンのガイドに従いました。favicon.svg にはprefers-color-scheme メディアクエリが埋め込まれ、ChromeとFirefoxではライトとダークが完璧に切り替わります。ところがSafariでサイトを開くと…… 何も起きません。ダークなタブ上でアイコンはライトテーマのままです。なぜそうなるのか、（マークアップではなく）バグだと確認する方法、現時点で実際に機能する回避策を解説します。

根本原因：WebKitバグ #309949

2025年後半にリリースされたSafari 26で、ようやくSVGファビコンがサポートされました。それまでSafariは最後の抵抗勢力だったのです。しかしその実装は、SVG内に埋め込まれた CSSメディアクエリを無視します。あなたの prefers-color-scheme: dark ブロックはパースされますが適用されることがないため、Safariは常にデフォルト（ライト）のバリアントを描画します。

これは WebKit Bug #309949 として追跡されています（WebKitGTKにも影響）。2026年初頭から未解決のままで、修正はまだリリースされていません。ChromeとFirefoxは影響を受けません。これらはSVGファビコン内のメディアクエリを正しく評価します。

自分のSVGではなくバグだと確認する

WebKitのせいにする前に、いつもの容疑者を排除しましょう。

同じファイルをChromeかFirefoxでテストする。 そこでアイコンが切り替われば、SVGは正しく、Safariのバグです。
メディアクエリがSVG自体の中にあるか確認する。 Safari （およびすべてのブラウザ）が扱えるのは favicon.svg ファイル内に埋め込まれたCSSだけです。ページ内のスタイルシートでファビコンを装飾することはできません。
linkタグを検証する： <link rel="icon" type="image/svg+xml" href="/favicon.svg"> であり、スケーリングのためにSVGに viewBox があることも確認してください。
ファビコンキャッシュをクリアする。 Safariはファビコンを強力にキャッシュします。古いアイコンがバグのように見えることがあります。プライベートウィンドウでテストしてください。

どこでもアイコンが切り替わらない場合は、まずSVGを修正してください。ダークモードファビコンガイドが正しいマークアップを解説しています。

回避策1：テーマニュートラルなアイコンをデザインする（推奨）

最も堅牢な修正は、メディアクエリに依存しないことです。デフォルトのSVGを、ライトとダークの両方のタブ背景で読めるようにデザインします。

ロゴを角丸の正方形背景に乗せる。 両方のタブの色合いで機能するブランドカラー（純白や純黒ではなく中間調）を使いましょう。
細い塗りよりも輪郭線を優先する。 輪郭線は両方の背景で生き残ります。
純白の形状（ライトタブで見えない）と純黒（ダークタブで見えない）を避ける。 #f5f5f5 のようなオフホワイトや #1a1a1a のような準黒は、コントラストのある背景プレートに対してのみ使ってください。

ChromeとFirefoxのユーザーはメディアクエリ経由でアダプティブ版を引き続き受け取り、 Safariのユーザーは消えてしまうことのないニュートラルなアイコンを得られます。全員が許容できるものを見ることになります。

回避策2：matchMediaによるJavaScript切り替え

Safariでの再現度が本当に重要なら、ランタイムで2つのPNGファビコンを切り替えましょう。これはSVGレンダリングを完全にバイパスし、すべてのブラウザで機能します。

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

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

SVGと並行してPNGアイコンのlinkを宣言し、ネイティブで処理できるモダンブラウザが二重に取得しないようSVGを先に置いてください。コストはPNG2枚と数行のスクリプトです。

やってはいけないこと

PNG/ICOフォールバックを外さない。 iOS SafariはSVGファビコンをまったく使いません（apple-touch-icon.png を要求します）し、古いAndroid WebViewもSVGを無視します。
linkタグに media 属性を付けて2つのSVGを配信しない。 <link rel="icon" media="(prefers-color-scheme: dark)"> はブラウザ間で信頼性が低く、埋め込みCSS方式が標準です。
自分のバグとして報告しない。 これは既知の公開バグです。 #309949 にスターを付け、Safari Technology Previewで修正がリリースされたら再テストしましょう。

現状まとめ

ブラウザ	SVGファビコン	埋め込みCSSによるダークモード
Chrome / Edge	✅	✅
Firefox	✅	✅
Safari 26+（macOS）	✅	❌ バグ #309949
iOS Safari	❌	❌