Favicon Dark Mode: Build Adaptive Icons for Any Tab

Dark mode is now a default for millions of users. Operating systems, browsers, and apps all support it. But most developers overlook one small detail: the favicon. That tiny icon in the tab, bookmarks bar, and home screen often becomes invisible or ugly when the system switches themes.

A dark logo on a transparent background disappears against a dark tab. A white logo for dark mode vanishes in light mode. The fix is adaptive favicons that detect the user's color scheme and adjust.

SVG favicons with embedded media queries make this possible without JavaScript. For older browsers, a fallback with PNG sizes covers the rest. This guide walks through the setup from design to implementation.

SVG Favicons with prefers-color-scheme

SVG favicons are the key to dark mode adaptation. Unlike PNG or ICO files, SVGs can contain embedded CSS, including media queries.

`xml `

This SVG shows a dark icon in light mode and a light icon in dark mode. The browser evaluates the media query each time the system color scheme changes, so the favicon updates automatically.

Link it in your HTML:

`html `

The browser will use the SVG if it supports it, falling back to the PNG otherwise. Chrome, Firefox, Edge, and Safari all support SVG favicons in their current versions.

Use the Favicon Generator to create your base icon in multiple sizes. Then manually create the SVG version with the media query for dark mode adaptation.

Designing Icons That Work in Both Modes

Not every logo works well as an adaptive favicon. A complex multicolor logo will look busy at 16x16 pixels regardless of color scheme. The best favicons are simple shapes with strong contrast.

Design principles for adaptive favicons:

• Simplify ruthlessly: at 16x16 pixels, only the boldest shapes survive. Remove fine details, thin lines, and small text.
• Test at actual size: design at a larger size for precision, but always preview at 16x16 and 32x32. What looks great at 512px might be unrecognizable at 16px.
• Choose two color versions: pick a dark color for light backgrounds and a light color for dark backgrounds. These do not have to be exact inverses. A dark blue logo might become a light blue version, not white.
• Avoid pure black and pure white: #000000 on a dark gray tab bar looks subtly wrong. Use off-black (#1a1a2e) and off-white (#e8e8e8) for a more polished result.
• Add a slight background: if your icon shape is complex, consider adding a subtle circular or rounded-square background. This provides consistent contrast without relying entirely on the icon colors.

Use the Color Picker to find the exact hex values for your light and dark versions. Test both versions against common dark and light background colors to verify sufficient contrast.

The Complete Favicon Set for 2026

A single favicon file is not enough for modern browsers and devices. Here is the complete set you should provide:

favicon.svg: your adaptive SVG with dark mode media query. Primary icon for modern browsers.

favicon.ico: 32x32 ICO file. Still needed for older browsers and some bookmarking tools. ICO files can contain multiple sizes (16x16 and 32x32) in one file.

apple-touch-icon.png: 180x180 PNG. Used when iOS users add your site to their home screen. Apple does not support SVG here.

icon-192.png and icon-512.png: used by Android Chrome for the home screen and splash screen. Referenced in your web app manifest.

`html `

The web app manifest (manifest.json) should reference the PNG icons:

`json { "icons": [ { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" } ] } `

Convert between formats with the Image Format Converter to generate PNGs from your master SVG design.

Testing Your Favicon Across Platforms

Favicons display differently across browsers, operating systems, and contexts. Testing in just one browser is not enough.

Where to test:

• Chrome tabs: the most common place users see your favicon. Test both pinned and unpinned tabs. Pinned tabs are smaller.
• Firefox tabs: renders favicons slightly differently from Chrome. The tab background color varies by theme.
• Safari tabs: favicons appear in the tab bar and the sidebar. Safari on iOS shows them differently from Safari on Mac.
• Bookmark bars: often shown at a smaller size than tabs. Test that your icon is still recognizable.
• Mobile home screen: test adding your site to the home screen on both iOS and Android.
• Windows taskbar: if users pin your site, the icon appears in the Windows taskbar.

To test dark mode:

• On Mac: System Settings, then Appearance, then Dark
• On Windows: Settings, then Personalization, then Colors, then Dark
• In Chrome DevTools: press Ctrl+Shift+P, type "Emulate prefers-color-scheme: dark"

The DevTools approach is fastest for development because you can toggle without changing your entire system theme.

A common issue is caching. Browsers aggressively cache favicons. During development, hard refresh (Ctrl+Shift+R) or clear the favicon cache specifically. Adding a version query string (/favicon.svg?v=2) can force a refresh for users.

Handling Edge Cases and Browser Quirks

Not everything works perfectly across all browsers. Here are the edge cases to watch for.

Safari and SVG favicons: Safari supports SVG favicons but had some inconsistencies with media queries in older versions. Safari 16 and later handle prefers-color-scheme in SVG favicons correctly. For Safari 15 and below, the PNG fallback will be used.

Internet Explorer: does not support SVG favicons at all. The ICO file is your only option. If you still have IE users, make sure your ICO file is properly formatted.

PWA icons: the web app manifest icons do not support SVG or media queries. You are stuck with static PNGs for home screen icons. If dark mode adaptation matters for these contexts, you would need JavaScript to dynamically update the manifest, which is fragile and generally not worth the effort.

Social media previews: when someone shares your URL on Twitter, Facebook, or Slack, these platforms use Open Graph images, not favicons. Your favicon strategy does not affect social previews.

Multiple favicons in one tab group: some browsers group tabs and show favicons in a grid. Make sure your icon is distinct enough to identify among other favicons. Simple shapes with unique colors work best.

For most websites, the SVG + ICO + Apple Touch Icon + Manifest PNG combination covers every realistic scenario. Do not over-engineer beyond this unless you have specific requirements for unusual platforms.

FAQ

Do all browsers support SVG favicons?

All major modern browsers support SVG favicons: Chrome 80+, Firefox 41+, Edge 80+, Safari 16+, and Opera 67+. Internet Explorer does not support them. For unsupported browsers, the PNG or ICO fallback is used automatically.

Can I animate an SVG favicon?

Technically yes. You can include CSS animations or SMIL animations in an SVG favicon. Some browsers will render the animation, but most throttle or ignore favicon animations to save resources. It is a novelty, not a practical feature.

My favicon is not updating after I changed it. What should I do?

Browsers cache favicons aggressively. Try a hard refresh (Ctrl+Shift+R), clear your browser cache, or add a version query string to the favicon URL. In Chrome, you can also navigate to chrome://favicon/ and clear favicon caches there. On mobile, you may need to remove and re-add the bookmark or home screen shortcut.

Should I use a different favicon for staging and production?

Yes, this is highly recommended. Using a different color or adding a small dot to your staging favicon prevents confusion when you have both environments open in separate tabs. A common pattern is a red or orange variant for staging and the normal brand colors for production.