SVG Favicon — Resolution-Independent Browser Icon
Use SVG favicons for crisp, resolution-independent icons in modern browsers. Learn the syntax, browser support, and how to combine SVG with PNG fallbacks.
Format & Technical
Detailed Explanation
SVG Favicon
SVG (Scalable Vector Graphics) favicons are the newest format option, offering resolution independence and dynamic capabilities that raster formats cannot match.
Why SVG Favicons?
- Resolution independent: Looks sharp on any display density without multiple files
- Tiny file size: Vector graphics are often smaller than equivalent raster images
- Dynamic with CSS: Can respond to
prefers-color-schemefor dark mode support - Single file: One SVG replaces multiple PNG sizes
Implementation
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- PNG fallback for unsupported browsers -->
<link rel="alternate icon" href="/favicon.png" type="image/png">
SVG Favicon Structure
A minimal SVG favicon:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect width="100" height="100" rx="20" fill="#3b82f6" />
<text x="50" y="50" text-anchor="middle" dominant-baseline="central"
font-size="65" font-family="system-ui" fill="white">D</text>
</svg>
Browser Support
| Browser | SVG Favicon Support |
|---|---|
| Chrome | 80+ |
| Firefox | 41+ |
| Safari | 16+ |
| Edge | 80+ |
| IE | Not supported |
Best Practices
- Keep it simple: Complex SVGs may not render well at 16x16 equivalent
- Use viewBox: Define the viewBox for proper scaling
- Test at small sizes: Preview how the SVG looks at actual favicon dimensions
- Include fallback: Always provide a PNG fallback for older browsers
- Avoid external resources: Do not reference external stylesheets or images
- Use inline styles: External CSS files will not load within a favicon context
Limitations
- Not supported in all browsers (notably IE and older Safari)
- Cannot be used for Apple Touch Icons (must be PNG)
- Cannot be used in the web app manifest (must be PNG)
- Some icon editors and tools do not support SVG favicons
Use Case
SVG favicons are ideal for modern web applications, developer tools, and technical audiences where older browser support is less critical. They are particularly useful for sites that support dark mode, as a single SVG can adapt to both color schemes, eliminating the need for separate favicon versions.