Tailwind CSSで洗練されたダークモードのトグルを実装したのに、Chromeの暗いタブバーでダークロゴのFaviconが完全に同化して見えなくなってしまった経験はありませんか？多くの開発者が dark:bg-gray-900 のレイアウトを完璧にするのに何時間も費やしますが、ブラウザのタブにも配慮が必要なことを忘れがちです。GitHubはこの点完璧で、UIテーマを切り替えるとFaviconも即座に反転します。

適切な tailwind css favicon setup を行うには、ユーティリティクラスとブラウザのネイティブUIの間のギャップを埋める必要があります。Tailwindの dark: バリアントはDOMを変更しますが、外部のSVGファイルの中身を書き換えたり、<link rel='icon'> タグを魔法のように入れ替えたりすることはできません。具体的な解決策を見ていきましょう。

Tailwind CSSのFavicon設定をマスターする

1. システムレベルのアプローチ（JS不要）

OSのシステム設定に完全に依存する場合（Tailwindの media 戦略）、JavaScriptは必要ありません。メディアクエリを埋め込んだSVG Faviconを用意するだけです。残りはブラウザがネイティブに処理してくれます。

<svg xmlns='http://www.w3.org/2000/svg'>
  <style>
    path { fill: black; }
    @media (prefers-color-scheme: dark) {
      path { fill: white; }
    }
  </style>
  <path d='...' />
</svg>

このネイティブな挙動について詳しくは、SVG Faviconガイドをご覧ください。

2. 手動トグルアプローチ（プロの手法）

多くのTailwindプロジェクトでは、ダークモードに class 戦略を使用し、ユーザーが手動でテーマを切り替えられるようにしています。SVG内のCSSは親HTMLドキュメントの class='dark' を読み取れないため、Faviconを動的に切り替える小さなスクリプトが必要です。

3. コードの実装

UIとタブアイコンを完全に同期させるために、bodyの閉じタグの直前にこのスクリプトを配置します：

<script>
  const favicon = document.getElementById('favicon');
  const html = document.documentElement;
  const updateIcon = () => {
    const isDark = html.classList.contains('dark');
    favicon.href = isDark ? '/favicon-dark.svg' : '/favicon-light.svg';
  };
  updateIcon();
  new MutationObserver(updateIcon).observe(html, {
    attributes: true,
    attributeFilter: ['class']
  });
</script>

これで完了です。ブラウザのタブがTailwindのテーマ切り替えに即座に反応するようになりました。ライト用とダーク用のアセットを素早く生成する必要がある場合は、ロゴを Mzu favicondl にアップロードして、必要なフォーマットを手間なく取得してください。