SVGでファビコンをダークモードに対応

ブラウザがシステムのテーマに従うため、同じページでもタブの背景が白に近い人も黒に近い人もいます。片方だけを想定した単色ファビコンは、もう片方では読めなくなります。

対策として不透明な色付き背景を使うサイトもあります。有効ですが、大手ブランドのような切り抜きシンボルに比べて、重たい塊に見えることがあります。

ブラウザに選ばせる方法なら、JavaScriptもサーバー側の判定も不要です。

SVGは平面画像ではなく文書なので、styleタグやメディアクエリを含められます。prefers-color-scheme: darkルールで、ブラウザがダークテーマのときのパスの塗り色を変更します。

通常はライトテーマ用の色を初期値にして、ダークモードでは別の色に置き換えます。ブラウザは表示時に適切なルールを適用し、テーマを切り替えるとタブもすぐに更新します。

単なる色の反転だけでなく、まったく別の図柄も使えます。ライト時は切り抜きシンボル、ダーク時は塗りつぶしのバッジ、といった切り替えも可能です。

link rel="icon" type="image/svg+xml" href="/favicon.svg"でSVGを指定します。対応ブラウザはSVGを優先し、非対応ブラウザはルートのfavicon.icoにフォールバックします。

どちらも削除する必要はありません。2種類を併用して、それぞれの対応範囲を補います。32ピクセルのアイコンにも段階的な機能拡張を適用できます。

ただしSVGファビコンは単体で完結する必要があります。この用途では外部フォント、リモート画像、スクリプトを読み込めません。文字は輪郭線に変換してください。

ダーク用バリエーションが適用されるのはデスクトップのファビコンです。不透明なPNGであるApple Touchアイコンや、Androidが独自の背景で表示するマニフェストアイコンには影響しません。

すべてのブラウザが対応するわけではありません。Chromium系とFirefoxは可変SVGを読み込みますが、Safariはバージョンによって対応が異なります。非対応時は.icoへ自動で切り替わります。

ライト用をすべての訪問者向けの基本デザインにして、ダーク用は対応ブラウザで表示を改善するための追加機能として考えましょう。