jonesrussell Generating Favicons
Overview
Create favicons using inline SVG for modern browsers and convert to ICO for legacy support. SVG favicons support dark mode via prefers-color-scheme.
Quick Reference
| File | Purpose | Size |
|---|---|---|
icon.svg |
Modern browsers (scalable) | Any viewBox |
favicon.ico |
Legacy browsers | 32x32 or 16x16+32x32 |
apple-touch-icon.png |
iOS home screen | 180x180 |
HTML Tags
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/img/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/img/apple-touch-icon.png">
SVG Design Pattern
Design at a small viewBox (32x32 or 64x64). Keep shapes simple — favicons are tiny.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<!-- Background -->
<rect width="64" height="64" rx="12" fill="#0f1117"/>
<!-- Simple letterform or icon -->
<text x="32" y="46" text-anchor="middle"
font-family="system-ui, sans-serif" font-weight="800"
font-size="40" fill="#f59e0b">W</text>
<!-- Optional dark mode support -->
<style>
@media (prefers-color-scheme: light) {
rect { fill: #f59e0b; }
text { fill: #0f1117; }
}
</style>
</svg>
ICO Generation
Use Playwright to screenshot the SVG at 32x32, or use ImageMagick:
# ImageMagick
convert icon.svg -resize 32x32 favicon.ico
# Playwright (if no ImageMagick)
# Render SVG in browser at 32x32 viewport, screenshot as PNG
# Then use sharp or jimp to convert PNG→ICO
Common Mistakes
| Mistake | Fix |
|---|---|
| Complex artwork at 16px | Simplify to letterform or geometric shape |
| Custom fonts in SVG | Use system fonts — custom fonts won't load |
Missing xmlns attribute |
Required for standalone SVG files |
Forgetting sizes="any" on ico link |
Tells browser ico is fallback, prefer SVG |