Dark Mode Favicons: How to Make Your Icon Adapt to Light and Dark Themes
Your favicon looks perfect against Chrome's light tab bar. Then a user switches to dark mode, and suddenly your icon either disappears into the darkness or screams for attention like a flashlight in a cave.
This isn't a hypothetical problem. With dark mode adoption exceeding 80% on some platforms, there's a good chance more than half your visitors are viewing your favicon against a dark background right now. And here's what most website owners don't realize: you can actually make your favicon adapt automatically to match the user's color scheme preference.
In this guide, you'll learn:
- How adaptive favicons work (and which browsers support them)
- The SVG technique that makes dark mode favicons possible
- Step-by-step implementation with tested code
- Design strategies for creating effective light and dark variants
- Fallback approaches for browsers that don't support adaptive favicons
Let's make sure your favicon looks intentional in every context.
Why Dark Mode Breaks Traditional Favicons
Most favicons were designed in an era when browser tabs were universally light-colored. Designers created icons optimized for white or light gray backgrounds, never considering that the background might change.
Here's what happens with common favicon designs in dark mode:
Black or dark-colored favicons: They merge into the dark tab bar, becoming a shapeless blob or completely invisible. A black "M" that looked bold and professional now looks like a rendering error.
White or light-colored favicons: They suddenly pop with extreme contrast. An icon that felt balanced now looks harsh and disconnected from your brand's visual identity.
Favicons with no background: Transparent icons that relied on the browser's light background for contrast lose their foundation entirely.
Colorful favicons with dark accents: Elements designed to provide definition (outlines, shadows, text) disappear when surrounded by similar darkness.
The fix isn't to pick a "neutral" color that works okay in both modes. That's a compromise that makes your favicon look mediocre everywhere instead of great anywhere. The real solution is an adaptive favicon that presents the right version for the right context.
How Adaptive Favicons Work
The magic happens through SVG favicons combined with CSS media queries. Unlike raster formats (ICO, PNG), SVG files can contain embedded CSS—including the prefers-color-scheme media query that detects whether a user has enabled dark mode.
Here's the core concept:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
.icon-fill { fill: #1a1a1a; }
@media (prefers-color-scheme: dark) {
.icon-fill { fill: #ffffff; }
}
</style>
<circle class="icon-fill" cx="16" cy="16" r="14"/>
</svg>
This single SVG file contains both versions of your favicon. The browser reads the user's system preference and applies the appropriate styles automatically—no JavaScript, no server-side detection, no multiple file requests.
When the user toggles their system from light to dark mode (or vice versa), the favicon updates instantly. It's the same behavior users expect from well-designed websites and apps, now applied to your browser tab icon.
Browser Support for Adaptive SVG Favicons
Before implementing, you need to understand the current support landscape. As of 2024:
Full Support:
- Chrome 80+ (released February 2020)
- Edge 80+ (Chromium-based)
- Firefox 107+ (released November 2022)
- Opera 67+
No Support:
- Safari (all versions as of Safari 17.4)
- Internet Explorer (obviously)
- Older browser versions
Safari's lack of support is the biggest gap. Apple's browser does support SVG favicons, and it does support the prefers-color-scheme media query in web pages—it just doesn't apply embedded styles when rendering SVG favicons. Your Safari users will see the default (light mode) version regardless of their system setting.
Given Safari's significant market share (roughly 20% of desktop browsers, higher on mobile), you'll need a fallback strategy. We'll cover that shortly.
Step-by-Step Implementation
Step 1: Design Your Light and Dark Variants
Before touching code, you need two versions of your favicon design. These don't have to be dramatically different—often they're the same icon with adjusted colors.
Common adaptation approaches:
Simple inversion: A dark icon on transparent background → light icon on transparent background. Works well for monochromatic logos.
Background swap: Light background with dark icon → dark background with light icon. Effective when your logo needs a contained background.
Selective color adjustment: Keep your primary brand color but adjust accents, outlines, or shadows that provide contrast. Good for colorful logos where full inversion would lose brand recognition.
Dual brand colors: Some brands have established light and dark logo variants. Use them.
The goal is maintaining instant recognition while optimizing visibility. Your favicon should look like it belongs in both environments—not like an afterthought.
Step 2: Create Your Adaptive SVG
Here's a complete, production-ready example:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
.bg { fill: #ffffff; }
.icon { fill: #0066cc; }
.accent { fill: #1a1a1a; }
@media (prefers-color-scheme: dark) {
.bg { fill: #1a1a1a; }
.icon { fill: #4d9fff; }
.accent { fill: #ffffff; }
}
</style>
<!-- Background circle -->
<circle class="bg" cx="16" cy="16" r="16"/>
<!-- Main icon shape -->
<path class="icon" d="M16 6l8 14H8z"/>
<!-- Accent details -->
<circle class="accent" cx="16" cy="14" r="2"/>
</svg>
Notice a few things:
CSS classes for each element: This lets you control exactly which parts change between modes. Your primary brand color might stay constant while only the background adapts.
Light mode as default: The base styles (outside the media query) define light mode. This matters for browsers that don't support the media query—they'll show the light version.
Adjusted colors, not just inverted: The blue shifts from #0066cc to #4d9fff in dark mode. Pure blue that looks great on white can appear dull on dark backgrounds, so we've lightened it. This kind of subtle adjustment makes the difference between amateur and professional.
Step 3: Add the HTML Link Tag
Implementing in your HTML is straightforward:
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
Place this in your document's <head> section. The type="image/svg+xml" attribute helps browsers understand the format, though modern browsers will detect it automatically.
Step 4: Set Up Fallbacks
Since Safari and older browsers won't show your adaptive SVG correctly, provide fallbacks:
<!-- Adaptive SVG for modern browsers -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- PNG fallback for Safari and older browsers -->
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png">
<!-- ICO fallback for legacy browsers -->
<link rel="icon" href="/favicon.ico" sizes="48x48">
Important ordering: Place the SVG first. Browsers will use the first format they support, and you want SVG to take priority for browsers that handle it correctly.
For Safari specifically, you'll need to decide which variant to show. Light mode is the safer default since Safari's dark mode adoption came later, but if your analytics show most Safari users prefer dark mode, you might create the PNG fallback in dark colors.
Step 5: Test Across Browsers and Modes
Testing dark mode favicons requires actually switching your system settings. Here's the process:
On macOS:
- Open System Settings → Appearance
- Switch between Light, Dark, and Auto
- Check Chrome, Firefox, and Safari tabs
On Windows:
- Open Settings → Personalization → Colors
- Toggle between Light and Dark under "Choose your mode"
- Test in Edge, Chrome, and Firefox
In browser DevTools (Chrome/Edge):
- Open DevTools (F12)
- Click the three-dot menu → More tools → Rendering
- Find "Emulate CSS media feature prefers-color-scheme"
- Toggle between light and dark
The DevTools method is faster for development, but always confirm with actual system settings before deploying.
Design Strategies for Light and Dark Variants
Getting the technical implementation right is half the battle. The other half is creating variants that actually look good.
Strategy 1: The Simple Swap
Best for: Monochromatic logos, text-based marks, simple geometric shapes
Take your existing favicon and swap the primary colors. If you have a dark icon on a light background, create a light icon on a dark background.
<style>
.logo { fill: #222222; }
@media (prefers-color-scheme: dark) {
.logo { fill: #f0f0f0; }
}
</style>
Don't use pure black (#000000) or pure white (#ffffff) for the swap. Pure colors can appear harsh. #1a1a1a or #222222 for dark and #f0f0f0 or #e8e8e8 for light feel more natural.
Strategy 2: The Background Container
Best for: Logos that need a defined shape, colorful icons that clash with dark backgrounds
Wrap your icon in a background shape that changes color:
<style>
.container { fill: #ffffff; }
.icon { fill: #e63946; }
@media (prefers-color-scheme: dark) {
.container { fill: #2a2a2a; }
/* Icon color stays the same */
}
</style>
<rect class="container" width="32" height="32" rx="6"/>
<path class="icon" d="..."/>
This maintains your exact brand color while ensuring it always has appropriate contrast. The rounded rectangle background (rx="6") matches the iOS app icon style many users expect.
Strategy 3: The Vibrancy Adjustment
Best for: Brand colors that look dull or washed out on dark backgrounds
Colors behave differently against light and dark backgrounds. A vibrant blue that pops on white can look muted and lifeless on dark gray.
<style>
.brand { fill: #0066cc; }
@media (prefers-color-scheme: dark) {
.brand { fill: #3d8bff; }
}
</style>
In dark mode, increase saturation slightly and shift toward lighter values. Your brand guidelines might not account for this, but they should—it's the same adjustment that every well-designed dark mode interface makes.
Strategy 4: The Detail Reduction
Best for: Complex favicons with fine lines or small details
Details that provide definition in light mode can create visual noise in dark mode. Consider simplifying:
<style>
.outline { stroke: #333333; stroke-width: 1; }
@media (prefers-color-scheme: dark) {
.outline { stroke: none; }
}
</style>
This removes thin outlines in dark mode where they'd either disappear or create unwanted contrast. The icon becomes cleaner and more legible.
Handling Safari Users
Safari's lack of support for adaptive SVG favicons deserves special attention given Apple's market share.
Option 1: Default to light mode (recommended for most sites)
Your PNG fallback uses light mode colors. Safari users with dark mode will see the light variant, which might not be optimal but won't be broken.
Option 2: Default to dark mode
If your analytics show heavy Safari + dark mode usage, create the PNG fallback in dark colors. Light mode Safari users will see the dark variant.
Option 3: Use the dominant preference
Check your analytics for system dark mode preferences (you can detect this with JavaScript). Go with whichever is more common among your Safari users.
Option 4: JavaScript-based switching
You can detect prefers-color-scheme with JavaScript and dynamically swap the favicon:
const favicon = document.querySelector('link[rel="icon"]');
function updateFavicon() {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
favicon.href = '/favicon-dark.png';
} else {
favicon.href = '/favicon-light.png';
}
}
window.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', updateFavicon);
updateFavicon();
This works in Safari but requires JavaScript and maintaining separate PNG files. It's more maintenance but provides the full adaptive experience for all browsers.
Common Mistakes to Avoid
Using pure black and white: Too harsh. Use off-black (#1a1a1a) and off-white (#f5f5f5) for a more refined look.
Forgetting to test the transition: Users toggle dark mode. Watch your favicon change in real-time. Does it feel smooth and intentional?
Over-engineering the difference: Both variants should be obviously the same brand. If someone can't tell they're related, you've diverged too far.
Ignoring the tab bar context: Your favicon sits alongside others. Check how it looks next to Google, YouTube, and other common tabs in both modes.
Skipping the fallback: Without proper fallbacks, Safari and older browsers might show nothing. Always include PNG or ICO alternatives.
Creating Your Adaptive Favicon
Designing two variants that work together requires balancing brand consistency with optimal visibility. It's more complex than creating a single favicon, but the professional result is worth it.
If you're starting fresh and want to explore designs that naturally work well in both light and dark contexts, try generating some favicon ideas. You can quickly see how different concepts, colors, and styles translate to the tiny favicon canvas—then adapt your favorite for both modes.
FAQ
Do I need separate files for light and dark mode favicons?
Not if you use the SVG approach. A single SVG file can contain both variants using embedded CSS with the prefers-color-scheme media query. The browser automatically applies the correct styles based on the user's system setting. However, you'll still need separate PNG files for Safari fallback if you want both variants supported there.
Will my dark mode favicon update automatically when users toggle their system theme?
Yes, in supporting browsers (Chrome, Firefox, Edge). The favicon updates instantly when the user changes their system color scheme—no page refresh required. Safari doesn't support this automatic switching for favicons even though it supports prefers-color-scheme in regular CSS.
What if my brand colors don't work well in dark mode?
Consider adjusting brightness and saturation rather than changing colors entirely. A darker blue can shift to a lighter, slightly more saturated blue for dark mode while remaining recognizably the same brand. Alternatively, use a containing background shape that changes color while keeping your exact brand color for the icon itself.
Should I use different icons entirely for light and dark mode?
Generally, no. Both variants should be instantly recognizable as the same brand. Changing the icon shape or symbol will confuse users and weaken brand recognition. Stick to color adjustments, background changes, or minor detail modifications while keeping the core design identical.
Does this affect SEO at all?
Adaptive favicons have no direct SEO impact. Google's crawler doesn't evaluate color scheme preferences. However, professional touches like adaptive favicons contribute to overall site quality perception, which can indirectly influence user behavior metrics. More importantly, it's simply better UX for the majority of users who browse in dark mode.