How to create an SVG favicon
Quick guide
The favicon is the little icon in the browser tab. Using it in SVG gives perfect sharpness on any screen and a single lightweight file.
Advantages of the SVG favicon
- Sharp on normal and Retina screens, without generating several PNGs.
- A single file, minimal weight.
- It can adapt to dark mode with CSS inside the SVG itself.
1. Design the icon
Make it simple and recognizable at small size. Use a square canvas (for example 64x64) in svgdesk. Few shapes, good contrast.
2. Export the SVG
Save the file as favicon.svg in your site's root.
3. Link it in the HTML
<link rel="icon" href="favicon.svg" type="image/svg+xml">
4. Fallback (optional)
Old Safari doesn't support SVG favicons. If you need full coverage, add a favicon.ico or PNG as a backup:
<link rel="icon" href="favicon.ico" sizes="any">
Adapt to dark mode
Inside the SVG you can include a CSS media query to change the icon's color based on the system theme. Keep it simple so it looks good at 16px.