Every favicon guide gives you the same list of files. I built the set from a real 716-byte logo to see the sizes, and found the one check most guides skip.
TL;DR: a square favicon.svg (with dark mode inside it), a favicon.ico with 16, 32 and 48 px images, a 180 px apple-touch-icon.png, two Android PNGs in a manifest, and four lines in <head>. Then look at it at 16 px.
The files, measured
| File | What uses it | Bytes |
|---|---|---|
| favicon.svg | Modern browsers, any size, dark mode | 568 (377 gzipped) |
| favicon.ico | Old browsers, tools that request /favicon.ico | 2,574 |
| apple-touch-icon.png | iPhone and iPad home screen, 180 x 180 | 5,171 |
| icon-192.png + icon-512.png | Android home screen, via the manifest | 20,196 |
1. Make the viewBox square
The logo had a 768 x 896 viewBox. Fitted to the drawing in the SVG Lab editor, the artboard came out 678 x 806. A favicon slot is square, so I set the viewBox to an 860 x 860 square around the mark and dropped the background rectangle.
2. Check it at 16 px
I had Chrome render the SVG at 16, 32 and 48 px. At 32 and 48 the bird is clear. At 16 the thin feather tips turn into grey specks. Nothing is wrong with the file: 16 pixels cannot hold a line that thin. If yours fails this check, use a bolder version of the mark.
3. Dark mode lives inside the SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="59 93 860 860"> <style> path { fill: #111 } @media (prefers-color-scheme: dark) { path { fill: #f7f3ec } } </style> <path d="M 150 420 C 170 332 ... Z"/> </svg> Chromium draws SVG favicons in secure static mode, so no web fonts, linked images or scripts: keep everything in the file.
4. The ICO, with Pillow
Chrome rendered the PNGs; Pillow packed the small ones:
from PIL import Image big = Image.open("fav-48.png") big.save("favicon.ico", sizes=[(16, 16), (32, 32), (48, 48)], append_images=[Image.open("fav-16.png"), Image.open("fav-32.png")]) 5. The head tags
<link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> Note sizes="32x32", not sizes="any". ChatGPT still gave me any on 7 November. The Evil Martians favicon guide switched to 32x32 in July 2023 to stop Chrome downloading both the ICO and the SVG.
Browser support: Chrome and Edge from 80, Firefox from 41, Safari from 26 (caniuse, 92.55 percent of browsers in use).
If you need the icon itself first, the SVG Lab MCP lets Claude, ChatGPT, Codex or Cursor draw icons as vector shapes through SVG Lab's Design Engine.
Full write-up with FAQ: https://svglab.app/blog/how-to-make-a-favicon-from-an-svg
