How to Create an SVG Favicon with Dark Mode Support
A single SVG favicon can automatically switch between light and dark versions using embedded CSS media queries — no two files needed.
Drop your image here
Supports PNG, JPG, WEBP up to 5MB
SVG Favicon Dark Mode Setup
Modern browsers support SVG favicons (Chrome 80+, Firefox 41+). Embed a `<style>` block with `@media (prefers-color-scheme: dark)` inside the SVG to swap colors automatically.
- Link in <head>: <link rel='icon' href='favicon.svg' type='image/svg+xml'>
- Add <style> inside SVG with @media prefers-color-scheme
- Keep a fallback favicon.ico for Safari and older browsers
SVG Favicon Browser Support
SVG favicons work in Chrome, Edge, Firefox, and Opera. Safari does not support SVG favicons — always include a PNG or ICO fallback in the link tag order.
- Chrome 80+, Firefox 41+, Edge 80+: SVG favicon supported
- Safari: use PNG fallback (link rel='apple-touch-icon')
- Order: SVG link first, then ICO fallback
Frequently Asked Questions
How do I add a dark mode SVG favicon?
Add @media (prefers-color-scheme: dark) { path { fill: white; } } inside a <style> tag within your SVG favicon file.
Will an SVG favicon work on all browsers?
Not Safari — include <link rel='icon' href='favicon.ico'> after the SVG link as a fallback for Safari and legacy browsers.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in seconds.
Try It Free — Convert Image to SVG