Tech Starlog

ダークモード対応ファビコンの実装方法

投稿日：2026/01/27

最近のブラウザやOSはダークモードに対応しており、Webサイトも自動的に配色が切り替わることが増えています。
しかし、ファビコンがライトモード前提のままだと、背景と同化して見えなくなることがあります。

本記事では、ダークモードに対応したファビコンを実装する方法を解説します。

ダークモード対応ファビコンとは？

通常のファビコンは1つの画像だけを指定します。

<link rel="icon" href="/favicon.png">

この方法だと、ダークモードでも同じ画像が使われるため、

  • 黒背景に黒いアイコンが見えない
  • 白背景前提のデザインが浮いて見える

といった問題が発生します。

ダークモード対応ファビコンでは、OSやブラウザのテーマに応じてアイコンを切り替えます。

方法① media 属性でファビコンを切り替える

prefers-color-scheme を使うことで、ライト / ダークを切り替えられます。

HTML設定例

<!-- ライトモード用 -->
<link
  rel="icon"
  href="/favicon-light.svg"
  type="image/svg+xml"
  media="(prefers-color-scheme: light)"
>

<!-- ダークモード用 -->
<link
  rel="icon"
  href="/favicon-dark.svg"
  type="image/svg+xml"
  media="(prefers-color-scheme: dark)"
>

ブラウザが自動的に適切なファビコンを選択します。

SVGでファビコンを作成する

SVGを使うと、画像ツールを使わずにコードだけでファビコンを作成できます。

ライトモード用（favicon-light.svg）

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect width="100" height="100" rx="20" fill="#e2e8f0"/>
  <text x="50" y="65" text-anchor="middle" font-size="48" fill="#0f172a">
    SAMPLE
  </text>
</svg>

ダークモード用（favicon-dark.svg）

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect width="100" height="100" rx="20" fill="#0f172a"/>
  <text x="50" y="65" text-anchor="middle" font-size="48" fill="#38bdf8">
    SAMPLE
  </text>
</svg>

Laravelプロジェクトでの配置例

public/
 ├── favicon-light.svg
 ├── favicon-dark.svg
 └── index.php

Bladeテンプレートの <head> に設定します。

<link
  rel="icon"
  href="{{ asset('favicon-light.svg') }}"
  type="image/svg+xml"
  media="(prefers-color-scheme: light)"
>

<link
  rel="icon"
  href="{{ asset('favicon-dark.svg') }}"
  type="image/svg+xml"
  media="(prefers-color-scheme: dark)"
>

方法② SVG内部でCSSを使って切り替える

SVGの中に prefers-color-scheme を書く方法もあります。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    rect { fill: #e2e8f0; }
    text { fill: #0f172a; }

    @media (prefers-color-scheme: dark) {
      rect { fill: #0f172a; }
      text { fill: #38bdf8; }
    }
  </style>

  <rect width="100" height="100" rx="20"/>
  <text x="50" y="65" text-anchor="middle" font-size="48">
    SAMPLE
  </text>
</svg>

1ファイルで管理できるメリットがありますが、一部ブラウザでは挙動が不安定な場合があります。

キャッシュ対策

ファビコンはブラウザに強くキャッシュされます。

変更が反映されない場合は：

  • スーパーリロード（Cmd + Shift + R）
  • シークレットモードで確認
  • ファイル名を変更する 例：favicon-dark-v2.svg

動作確認方法

  1. ブラウザのテーマを切り替える
    • macOS：システム設定 → 外観 → ライト / ダーク
  2. タブのファビコンが切り替わるか確認
  3. DevTools → Application → Manifest / Icons でも確認可能

まとめ

  • ダークモード対応ファビコンはUXと視認性を向上させる
  • prefers-color-scheme を使うだけで簡単に切り替え可能
  • SVGなら画像ツール不要で管理しやすい
  • Laravelでは public 配下に配置して Blade に設定するだけ
  • キャッシュ対策を忘れない
⬅️ 記事一覧へ戻る