Bottom-line: I ship dark mode favicons as one SVG with embedded prefers color scheme media plus a PNG fallback pair, and tabs stay legible in both light and dark chrome. Build the art in the free favicon generator, test 16 plus 32 in both themes, and keep a mid tone fallback so no parser ever shows a blank tab.
Dark tabs wash out dark logos fast. I learned this when a navy mark that sang on white chrome vanished on charcoal developer edition chrome. The fix lives inside the SVG file itself with media queries, plus a PNG safety net for parsers that ignore them.
One file with two palettes using embedded media
Embed a style block inside the SVG with prefers color scheme media that flips fills between light plus dark tab values. I tested navy on white flipping to white on navy and contrast held in Chrome dark plus Firefox dark.
| Theme tested | Fill shipped | Contrast observed | Fallback paired |
|---|---|---|---|
| Light chrome tabs | Navy mark on light tile | Pass large bold | 32 PNG light variant |
| Dark chrome tabs | Pale mark on dark tile | Pass large bold | 32 PNG dark variant |
| Private dark windows | High contrast pair | Pass AAA | ICO mid tone |
- Embed style inside SVG so media travels with the file.
- Preview 16 dark before ship because small sizes fail first.
Fallback order when media is ignored
Old parsers ignore embedded media and need a safe static mark. I ship 32 PNG plus ICO with mid tone fills that read on both light and dark chrome.
| Parser tested | File served | Result observed | Rule shipped |
|---|---|---|---|
| Modern Chrome plus Firefox | Themed SVG | Auto switching fills | SVG first in head |
| Safari 17 | 32 PNG mid tone | Stable neutral tab | PNG second in head |
| Legacy tools | ICO mid tone | No blank tabs | ICO last always |
Contrast testing routine for both themes
Preview 16 plus 32 in light browser chrome plus dark chrome plus private windows with different themes. Verify with the color contrast checker at production sizes before shipping.
Versioning plus cache for themed files
Keep file names versioned and purge CDN after visual changes. One file means one cache entry and theme switching stays pure client side.
Next steps to parent L1 plus gradient reuse
Return to the parent L1 favicon generator guide for the full matrix plus dark mode tab checks. Then explore themed ramps in the favicon OG gradient reuse guide for brand coherence across tabs plus feeds.
Test the themed file across operating systems, not just browser themes. Windows high-contrast dark, macOS graphite dark and Ubuntu dark shell each tint tab chrome differently, and a mark that passes in one can shimmer in another. I keep three virtual desktops with opposite themes and flip the same 16-pixel render through all of them before calling the palette done, linking the final check back to the color contrast checker at exact tab sizes.
Respect forced-colors and prefers-contrast users on top of light-dark theming. When the operating system forces a palette, embedded SVG fills may be overridden, so keep glyph shapes bold and geometric enough to survive monochrome rendering. A 2-pixel keyline around the mark preserves silhouette even when color information is stripped entirely by the system.
Ship with a deployment checklist so themed icons never regress silently. Version filenames on every art change, purge the CDN edge, confirm the ICO fallback still carries a mid-tone mark, and re-open one private window per theme after each deploy. One stale cache entry can undo an otherwise perfect dual-palette file.