ダークモード対応ファビコン（prefers-color-scheme）
ダークモード対応ファビコンは、OS のライト／ダーク設定に合わせて変化し、暗いブラウザクロームでも明るいクロームでも読みやすさを保ちます。二つの方法があります。自らを塗り直す prefers-color-scheme メディアクエリを内包した SVG ファビコンか、link タグに media="(prefers-color-scheme: dark)" を付けて宣言した 2 枚の PNG です。両方で読める中間色のアイコン一つが、最も単純な代替策です。
反応させる二つの方法
よりすっきりした方法は、自身のスタイルの中に prefers-color-scheme メディアクエリを持つ SVG ファビコンで、OS がダークに切り替わると一枚のファイルが自らを塗り直します。SVG ファビコンをレンダリングしメディアクエリを尊重するブラウザ（Safari と Firefox を含む）は、追加のタグ無しでこの変化を拾います。
代替策は 2 枚のラスターファイル、すなわち通常のアイコンとダーク最適化したアイコンで、それぞれ media 属性を持つ link タグに載せます。media で PNG ファビコンを切り替えるサポートは SVG の経路ほど一貫していないので、常に単独で成り立つ既定のアイコンを残しておきましょう。
2 ファイルの方法
<link rel="icon" href="/favicon-light.png" media="(prefers-color-scheme: light)" />
<link rel="icon" href="/favicon-dark.png" media="(prefers-color-scheme: dark)" />
<link rel="icon" href="/favicon.ico" sizes="any" />単純な favicon.ico は、media 属性を無視するすべてのもののためのフォールバックです。
ダークモード対応ファビコンに関するよくある質問
ダークモード対応ファビコンはどう作りますか？
自らを塗り直すよう SVG ファビコンの中に prefers-color-scheme メディアクエリを入れるか、link タグに media="(prefers-color-scheme: dark)" と light を付けた 2 枚の PNG を宣言します。フォールバックとして単純な favicon.ico を残しておきましょう。
ファビコンの media 属性はどこでも機能しますか？
いいえ。prefers-color-scheme でファビコンを切り替えるサポートはブラウザ間で不均一です。だからこそ、テーマに関わらず機能する既定のアイコンを常に残しておくのです。
SVG のメディアクエリと 2 枚の PNG、どちらがいいですか？
SVG の経路は 1 ファイルで、テーマ切り替えのサポートも概ね良好です。2 枚の PNG はテーマごとのピクセル単位の制御ができますが、より一貫性の低い media 属性の扱いに頼ることになります。