Written by David Kim — Frontend Developer. More about me →I checked 50 websites and 13 had favicons that completely disappeared on dark browser themes. Here is how to fix it.
If your favicon is a dark logo on a transparent background, it looks fine on light mode. Switch to dark mode and the browser tab bar turns dark—your dark logo becomes invisible. I saw this on startup sites, dev tools, and even major SaaS products.
1. Add a white stroke: In your SVG or image editor, add a 2px white outline around your icon. This makes it visible on any background.
2. Use an SVG favicon with media query: SVG favicons support prefers-color-scheme natively. You can swap fill colors based on the theme.
3. Test on both themes: Use genfavicon.org to generate multiple sizes and preview them on light and dark backgrounds before deploying.
Written by David Kim — Frontend Developer. More about me →