ブランドの黒いロゴを何時間もかけて完璧に仕上げたのに、ダークモードを使用している80%のユーザーには見えないことに気づいたとしても、あなたは一人ではありません。私たちも皆、同じ経験をしています。ダークテーマのブラウザタブで新しいビルドを開くと、プロフェッショナルなアイコンがあるべき場所に、中空の空っぽの四角形が表示されるのです。これは壊れているように見えますし、2026年においては、手抜きな実装の兆候と言えるでしょう。

faviconのダークモード対応は、単に見た目の問題だけではありません。アクセシビリティとブランドの一貫性に関わることです。ユーザーがシステムテーマを切り替えたとき、あなたのサイトは即座に反応すべきです。技術的にはJavaScriptを使って<link>タグを入れ替えることもできますが、それはぎこちないアプローチであり、しばしば目に見えるちらつきを引き起こします。これを処理する現代的でプロフェッショナルな方法は、SVGを使用することです。

前提条件

始める前に、アイコンのSVGバージョンが必要です。もし今でもICOやPNGファイルのみを使用している場合は、なぜSVGがデファクトスタンダードなのかを理解するために、私たちのSVG Faviconsに関するガイドをぜひご覧になることを強くお勧めします。また、私たちのfavicon vs logoの比較で議論したように、アイコンのデザインが16x16ピクセルで判読できるほど十分に簡素化されていることを確認してください。

ステップ1: SVG内部スタイルトリック

シームレスなダークモード対応の秘訣は、SVGファイル自体の中にあります。SVGは本質的にXMLであるため、<style>ブロックを直接埋め込むことができます。これにより、ブラウザはアイコン専用のCSSメディアクエリを評価できるようになります。

コードエディタでSVGファイルを開き、次のようにスタイルブロックを追加してください。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #000000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #ffffff; }
    }
  </style>
  <path d="..." />
</svg>

この例では、アイコンはデフォルトで黒ですが、ユーザーのシステムがダークモードの場合には自動的に白に反転します。これは、GitHubのようなブランドが、ブラウザのUIテーマに関わらずOctocatが見えるようにするために行っていることと全く同じです。

ステップ2: HTMLの実装

SVGの準備ができたら、ブラウザにそれを使用するように指示する必要があります。<head>セクションに、次の行を追加してください。古い環境向けに標準のfavicon.icoをフォールバックとして残していますが、モダンブラウザはSVGを優先することに注意してください。

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

type="image/svg+xml"を使用することで、このファイルが内部スタイリングに対応していることをブラウザに伝えます。異なるフォーマットの具体的なコードについてさらに深く知りたい場合は、私たちのHTML guide for faviconsをご覧ください。

ステップ3: Safariのピン留めタブの処理

AppleのSafariは、少し異なる方法で処理します。SVG faviconをサポートしていますが、ピン留めされたタブには特定の「mask-icon」も使用します。そこでもブランドが美しく見えるようにするには、アイコンのモノクロバージョンを定義する必要があります。

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

color属性は、タブがアクティブなときのアイコンの塗りつぶし色を定義します。これはメインの適応型SVGとは別のファイルですが、真に洗練されたエクスペリエンスのためには必要なステップです。

よくある落とし穴

faviconのダークモード対応における最大の悩みは、ブラウザのキャッシュです。ブラウザはfaviconを非常に積極的にキャッシュすることで知られています。SVGを更新しても変更が表示されない場合は、URLにバージョン文字列を追加する（例: favicon.svg?v=2）か、ブラウザのサイトデータを完全にクリアしてみてください。

もう一つのよくある間違いは、SVGを過度に複雑にすることです。パスはクリーンに保ってください。もしSVGのすべてのパス要素にハードコードされたfill属性がある場合、ステップ1で追加したCSSブロックは、CSSの特異性ルールにより無視される可能性があります。メディアクエリが優先されるように、クラスを使用するか、タグを直接ターゲットにしてください。

私の推奨

faviconを変更するために複雑なJavaScriptのテーマリスナーに悩まされる必要はありません。それは脆弱で不要です。SVGのprefers-color-schemeメソッドに固執してください。これはネイティブで、パフォーマンスが高く、一度デプロイすればメンテナンスは不要です。既存の画像からこれらのファイルを素早く生成する必要がある場合は、カスタムCSSロジックを追加する前に、Mzu favicondlを使用して基本アセットを準備することができます。