Dark Mode Favicon Not Working in Safari? The WebKit Bug & Fixes

You followed the adaptive-favicon guide: your favicon.svg embeds a prefers-color-scheme media query, and it flips perfectly between light and dark in Chrome and Firefox. Then you open the site in Safari and… nothing. The icon stays in its light theme on a dark tab. Here's why that happens, how to confirm it's the bug (and not your markup), and the workarounds that actually work today.

The root cause: WebKit bug #309949

Safari 26, released in late 2025, finally added support for SVG favicons — until then Safari was the last holdout. But the implementation ignores CSS media queries embedded inside the SVG. Your prefers-color-scheme: dark block is parsed but never applied, so Safari always renders the default (light) variant of the icon.

This is tracked as WebKit Bug #309949 (also affecting WebKitGTK). It has been open since early 2026 with no fix shipped yet. Chrome and Firefox are unaffected — they evaluate media queries inside SVG favicons correctly.

Confirm it's the bug, not your SVG

Before blaming WebKit, rule out the usual suspects:

1. Test the same file in Chrome or Firefox. If the icon switches there, your SVG is correct — it's the Safari bug.
2. Check the media query is inside the SVG itself. Safari (and every browser) only honors CSS embedded in the favicon.svg file — a stylesheet in your page can't style the favicon.
3. Verify the link tag: <link rel="icon" type="image/svg+xml" href="/favicon.svg"> — and that the SVG has viewBox so it scales.
4. Clear the favicon cache. Safari caches favicons aggressively; a stale icon can masquerade as a bug. Test in a private window.

If the icon doesn't switch anywhere, fix the SVG first — our dark mode favicon guide covers the correct markup.

Workaround 1: design a theme-neutral icon (recommended)

The most robust fix is to not depend on the media query at all. Design the default SVG so it reads well on both light and dark tab backgrounds:

• Put your logo on a rounded-square background in a brand color that works on both tab shades (mid-tones beat pure white or black).
• Prefer outlines over thin solid fills — they survive both backgrounds.
• Avoid pure white shapes (invisible on light tabs) and pure black (invisible on dark tabs). Use off-white like #f5f5f5 or near-black like #1a1a1a only against a contrasting background plate.

Chrome and Firefox users still get the adaptive version via the media query; Safari users get a neutral icon that never disappears. Everyone sees something acceptable.

Workaround 2: JavaScript swap with matchMedia

If Safari fidelity really matters, swap between two PNG favicons at runtime. This bypasses SVG rendering entirely and works in every browser:

function setFavicon() {
  const dark = window.matchMedia('(prefers-color-scheme: dark)').matches
  const icon = document.querySelector("link[rel='icon'][type='image/png']")
  if (icon) {
    icon.href = dark ? '/favicon-dark.png' : '/favicon-light.png'
  }
}

setFavicon()
window.matchMedia('(prefers-color-scheme: dark)')
  .addEventListener('change', setFavicon)

Declare a PNG icon link alongside your SVG, and keep the SVG first so modern browsers that handle it natively don't double-fetch. The cost is two extra PNGs and a few lines of script.

What not to do

• Don't drop the PNG/ICO fallbacks. iOS Safari doesn't use SVG favicons at all (it wants apple-touch-icon.png), and older Android WebViews ignore SVG too.
• Don't serve two SVGs with a media attribute on the link tag. <link rel="icon" media="(prefers-color-scheme: dark)"> is unreliable across browsers — the embedded-CSS approach is the standard.
• Don't file it as your own bug. It's known and public — star #309949 and re-test when a Safari Technology Preview ships a fix.

The current state of play

Build a sanitized favicon.svg in seconds with our SVG favicon generator, then verify your whole setup with the favicon checker.