SEO-005
An SVG favicon that works everywhere
One small file, sharp at every size, adapts to dark mode, and needs no generator — plus the two lines that cover the browsers that still want a raster.
Favicon generators produce a folder of a dozen files for something that should be one. An inline SVG is sharp at any size, weighs a few hundred bytes, and can respond to the user's colour scheme.
Support is good in every current browser. Safari on iOS still prefers an apple-touch-icon and very old browsers want an ICO, so two extra lines cover the gap without going back to a generator.
The media query inside the SVG is the part people miss. A dark icon on a dark browser tab is invisible, and this fixes it in the file itself.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<style>
.bg { fill: #101A24; }
.fg { stroke: #A8760F; }
.dot { fill: #7FD4B0; }
@media (prefers-color-scheme: dark) {
.bg { fill: #E7EDF4; }
}
</style>
<rect class="bg" width="64" height="64" rx="10"/>
<path class="fg" d="M14 22h36" stroke-width="5" stroke-linecap="round"/>
<path class="fg" d="M32 22v28" stroke-width="5" stroke-linecap="round"/>
<circle class="dot" cx="46" cy="44" r="6"/>
</svg>
<!-- In the head, in this order: -->
<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg">
<link rel="alternate icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/assets/apple-touch-icon.png">Using it
Design it legible at 16 pixels. Everything looks fine at 64; at favicon size only two or three shapes survive.
Serve it with a long cache header and version it with the same filemtime trick as your other assets.
alternate icon is what lets a modern browser take the SVG while an old one falls back to the ICO.
What bites people
External CSS does not apply inside an SVG loaded as an icon. The style block has to be in the file.
Some feed readers and link previewers ignore SVG entirely, which is why the apple-touch-icon is still worth the one PNG.
Keep it under a kilobyte. It is requested on nearly every page load, including by crawlers.