Dark Mode Favicons Guide
Create favicons that automatically adapt to light and dark browser themes. Learn modern techniques for theme-aware icons using SVG and CSS media queries.
Why Dark Mode Favicons Matter
With dark mode becoming the default preference for many users, your favicon needs to look good on both light and dark backgrounds. A poorly designed favicon can become invisible or jarring when the browser theme changes.
Light Mode
Dark icon on light background
Dark Mode
Light icon on dark background
Methods for Dark Mode Support
1. SVG with CSS
Best Method
Single SVG file that adapts automatically using CSS media queries.
- Pros: Automatic, elegant, one file
- Cons: Limited browser support
2. Separate Files
Most Compatible
Separate SVG/PNG files for light and dark themes.
- Pros: Wide browser support
- Cons: Requires media queries in HTML
3. Neutral Design
Fallback Option
Design that works on any background color.
- Pros: Universal compatibility
- Cons: Less optimized appearance
Method 1: Adaptive SVG Favicon (Recommended)
The most elegant solution uses a single SVG file with embedded CSS that responds to the
prefers-color-scheme media query.
Complete SVG Example
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
/* Default (light mode) */
.icon-bg { fill: #0066cc; }
.icon-fg { fill: #ffffff; }
/* Dark mode */
@media (prefers-color-scheme: dark) {
.icon-bg { fill: #4da6ff; }
.icon-fg { fill: #0a0f1a; }
}
</style>
<!-- Background circle -->
<circle class="icon-bg" cx="16" cy="16" r="14"/>
<!-- Foreground shape -->
<path class="icon-fg" d="M16 8l-6 8h4v6h4v-6h4z"/>
</svg>HTML Implementation
<link rel="icon" type="image/svg+xml" href="/favicon.svg">Advantages
- Automatic switching - no JavaScript needed
- Single file - easier to maintain
- Instant response to theme changes
- Scalable to any size (vector)
- Smallest file size (typically 1-3 KB)
Browser Support
Supported:
- Chrome 80+ (2020)
- Firefox 70+ (2019)
- Edge 80+ (2020)
- Opera 67+ (2020)
Not Supported:
- Safari (all versions) - use fallback PNG
- Internet Explorer - use fallback ICO
Method 2: Separate Light/Dark Files
For better browser compatibility, provide separate favicon files and use HTML media queries to select the appropriate one.
HTML with Media Queries
<!-- Light mode favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon-light.svg"
media="(prefers-color-scheme: light)">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-light-32.png"
media="(prefers-color-scheme: light)">
<!-- Dark mode favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon-dark.svg"
media="(prefers-color-scheme: dark)">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-dark-32.png"
media="(prefers-color-scheme: dark)">
<!-- Default/fallback (no preference) -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon.png">SVG File Examples
favicon-light.svg (dark icon for light backgrounds):
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<circle fill="#0066cc" cx="16" cy="16" r="14"/>
<path fill="#ffffff" d="M16 8l-6 8h4v6h4v-6h4z"/>
</svg>favicon-dark.svg (light icon for dark backgrounds):
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<circle fill="#4da6ff" cx="16" cy="16" r="14"/>
<path fill="#0a0f1a" d="M16 8l-6 8h4v6h4v-6h4z"/>
</svg>Method 3: Universal Neutral Design
Design your favicon to work on any background by using strong contrast, borders, or multi-tone designs that don't rely on background color.
Design Strategies
1. Add Border/Outline
Works on any background
2. Multi-Color Design
Vibrant on any theme
3. High Contrast
Strong contrast always
When to Use
- When you need maximum browser compatibility
- For simpler implementation
- When SVG support is not available
- As fallback for older browsers
Dark Mode Design Guidelines
Best Practices
- Test both themes: Always preview in light and dark mode
- Adjust brightness: Use lighter colors for dark mode
- Maintain brand: Colors should still feel like your brand
- Consider contrast: Ensure readability in both modes
- Subtle differences: Don't completely change the design
- Use system preference: Respect user's choice
Avoid
- Pure white on dark: Too harsh, use softer whites
- Pure black on light: Use dark grays instead
- Low contrast: Icon must be visible
- Completely different designs: Maintain consistency
- Ignoring gradients: May need adjustment for dark mode
- No fallback: Always provide PNG/ICO fallback
Color Palette Recommendations
Light Mode Colors
Rich, saturated colors
Dark gray, not pure black
Dark Mode Colors
Lighter, less saturated
Light gray, not pure white
Testing Dark Mode Favicons
Browser Testing
Chrome/Edge
- Open DevTools (F12)
- Press Ctrl/Cmd + Shift + P
- Type "Rendering"
- Find "Emulate CSS prefers-color-scheme"
- Toggle between light/dark
Firefox
- Open DevTools (F12)
- Click three-dot menu
- Settings ? Inspector
- Enable "Simulate prefers-color-scheme"
- Toggle in DevTools toolbar
System-Wide Testing
Windows 11
Settings ? Personalization ? Colors ? Choose your mode
macOS
System Preferences ? General ? Appearance
iOS/Android
Settings ? Display ? Dark mode/theme
Complete Implementation Example
Recommended Multi-Method Approach
<!-- Adaptive SVG (modern browsers) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- Separate light/dark SVG (better compatibility) -->
<link rel="icon" type="image/svg+xml" href="/favicon-light.svg"
media="(prefers-color-scheme: light)">
<link rel="icon" type="image/svg+xml" href="/favicon-dark.svg"
media="(prefers-color-scheme: dark)">
<!-- PNG fallback (Safari, older browsers) -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<!-- ICO fallback (maximum compatibility) -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- Theme color -->
<meta name="theme-color" content="#ffffff"
media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0a0f1a"
media="(prefers-color-scheme: dark)">Generate Dark Mode Favicons Automatically
Create adaptive favicons with light and dark variants in seconds
Generate Dark Mode Icons