Tailwind CSS Favicon Setup: Sync Icons with Dark Mode

If you've ever built a sleek dark mode toggle with Tailwind CSS only to realize your dark logo favicon completely vanishes against Chrome's dark tab bar, you aren't alone. Developers spend hours perfecting their dark:bg-gray-900 layouts but forget that the browser tab needs love too. GitHub handles this perfectly—when you switch their UI theme, the favicon instantly flips to match.

A proper tailwind css favicon setup requires bridging the gap between your utility classes and the browser's native UI. Tailwind's dark: variant modifies the DOM, but it can't reach inside an external SVG file or magically swap your <link rel='icon'> tags. Here is exactly how to fix it.

Mastering the Tailwind CSS Favicon Setup

1. The System-Level Approach (No JS)

If you rely entirely on the OS system preference (Tailwind's media strategy), you don't need JavaScript. You just need an SVG favicon with an embedded media query. The browser handles the rest natively.

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

Read more about this native behavior in our SVG favicon guide.

2. The Manual Toggle Approach (The Pro Way)

Most Tailwind projects use the class strategy for dark mode, letting users manually toggle themes. Since CSS inside an SVG can't read the class='dark' on your parent HTML document, we need a tiny script to swap the favicon dynamically.

• Generate two distinct icons (light and dark) using Mzu favicondl.
• Give your primary link tag an ID: <link id='favicon' rel='icon' href='/favicon-light.svg'>
• Add a MutationObserver to watch the class attribute on your HTML tag.

3. The Code Implementation

Drop this script right before your closing body tag to keep the UI and the tab icon perfectly synced:

<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>

That's it. Your browser tab now respects your Tailwind theme toggles instantly. If you need to generate those light and dark assets quickly, run your logo through Mzu favicondl to get the exact formats you need without the headache.