From an SVG logo to a complete favicon set

The favicon is the smallest asset on a site and the one with the most formats. A modern site needs an SVG for browsers that support it, a PNG fallback, an apple-touch-icon for iOS home screens, and a web manifest with a couple of larger PNGs for Android. The good news is that all of these derive from one source file, and the bad news is that the source file is usually a 400 KB export straight out of a design tool.

Clean the SVG first

Exported SVGs carry editor metadata, redundant groups, absurd decimal precision and often an embedded copy of the original artwork. None of it renders. The SVG optimizer strips it and typically cuts the file by 60 to 90 percent, which matters because the favicon is loaded on every page view. Check the preview still matches before and after; the optimizer is conservative but a logo relying on an unusual filter is worth a look.

Two things to fix by hand while you are in there. Make sure the viewBox is square: a logo that is wider than tall will be letterboxed into a square icon and end up tiny. And if the design uses thin strokes, thicken them or convert to filled shapes; at 16 pixels a 1-unit stroke on a 100-unit canvas disappears.

Simplify for the small sizes

A favicon is displayed at 16 or 32 pixels in a tab and around 180 pixels on a home screen. Most logos do not survive the small end: wordmarks become a smear and detailed marks become noise. The usual answer is a second, simplified version for the icon (the initial letter, or the mark without the wordmark) rather than shrinking the full logo. A quick test is to convert it to PNG at 32 pixels with the SVG to PNG converter and look at it at actual size, not zoomed in. If you cannot tell what it is, simplify.

Generate the set

With a clean square SVG, the favicon package generator produces every file the platforms expect: favicon.svg, favicon.ico with the 16, 32 and 48 pixel variants inside, apple-touch-icon.png at 180 pixels, the 192 and 512 pixel PNGs for Android, and a site.webmanifest that points at them. It also outputs the <link> tags for the page head, which is worth copying exactly because the rel values are inconsistent between platforms and easy to get wrong from memory.

Give the Apple touch icon a background. iOS does not support transparency there and will fill it with black, which is rarely what the logo was designed against.

Dark mode

An SVG favicon can respond to the browser's colour scheme with an embedded style block:

<style>@media (prefers-color-scheme: dark) { path { fill: #fff; } }</style>

That means a dark logo on a light tab and a light logo on a dark tab from one file, which the PNG fallbacks cannot do. Test it in both modes; a logo with several colours may need a more targeted rule than a blanket fill.

Check it landed

After deploying, open the site in a private window and look at the tab, then add it to a phone home screen. If the old icon persists, it is a cache: browsers hold favicons aggressively, and a query string on the link (favicon.svg?v=2) forces a refresh.

The short version

Optimise the SVG, make it square, simplify it for 32 pixels, generate the package and paste the link tags it gives you. One source file, five minutes, and it works everywhere.