How to Use SVG as a Website Favicon
SVG favicons are tiny, scalable, and support dark mode natively. Set up the perfect favicon in under 5 minutes with this HTML guide.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Why SVG is Better for Favicons
Traditional ICO favicons require multiple embedded sizes. SVG favicons are one file, always sharp, and support dark mode via CSS media queries inside the SVG.
- One SVG file replaces 16, 32, 48, 64, 128px ICO variants
- Perfect sharpness at any system UI zoom level
- Dark mode support: <style> @media (prefers-color-scheme: dark) { .favicon-path { fill: white; } } inside the SVG
- Browser support: Chrome, Firefox, Edge, Opera — Safari supports SVG favicon as of Safari 15
- File size: a typical SVG favicon is 0.5–2KB vs a multi-size ICO of 15–50KB
Adding an SVG Favicon to Your Website
The link tag for SVG favicon placement in HTML head.
- <link rel='icon' type='image/svg+xml' href='/favicon.svg'>
- Keep existing ICO fallback: <link rel='icon' href='/favicon.ico' sizes='32x32'>
- Place SVG link before ICO: browser uses the first supported format
- For Apple Touch Icon (iOS home screen): still needs PNG — add separately
- Correct MIME type: ensure server serves SVG with Content-Type: image/svg+xml
Creating a Dark Mode Favicon
The killer feature of SVG favicons: automatic dark/light mode switching.
- Inside the SVG, add a <style> block:
- @media (prefers-color-scheme: dark) { .logo-primary { fill: #ffffff; } }
- Use class names on SVG paths and target with the dark mode media query
- Test: switch OS to dark mode and check the browser tab — your favicon changes
- No JavaScript needed — pure CSS inside the SVG file handles the switching
Frequently Asked Questions
Do SVG favicons work in all browsers?
Chrome, Firefox, Edge, and Opera all support SVG favicons. Safari added support in Safari 15. Always include a fallback ICO for complete coverage.
What size should my SVG favicon be?
SVG is resolution-independent — size doesn't matter. Design in a 100×100 or 32×32 viewBox for favicon proportions. The browser renders at the required display size.
Why isn't my SVG favicon showing up?
Check: 1) The server sends Content-Type: image/svg+xml for the SVG file. 2) The link tag uses type='image/svg+xml'. 3) The SVG has a proper viewBox attribute. 4) Hard refresh the browser (Ctrl+Shift+R).
Can I use an animated SVG as a favicon?
Chrome and Firefox support animated SVG favicons. Keep animations subtle — a spinning favicon is annoying. Consider animating only on specific page events using JavaScript to swap the favicon.
Do I still need an ICO favicon?
Yes, as a fallback for older browsers and for maximum compatibility. Set the ICO as the secondary link after the SVG: <link rel='icon' href='/favicon.ico' sizes='any'>.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG