Generate a favicon set
One image in, and the icon files a browser, an iOS home screen and an Android launcher each ask for.
How it works
A .ico file is a container rather than an image format. It opens with a six-byte directory header, follows that with one sixteen-byte entry per icon, and stores the payloads back to back at the end. Each entry records a width, a height, a byte length and an offset into the file, so one .ico can carry several resolutions and let the operating system choose. Width and height are single bytes, which means 256 has to be written as zero and 257 cannot be described at all.
The payloads written here are PNG. The original 1995 design expected a headerless Windows bitmap plus a one-bit mask for transparency, and that mask is where most of the folklore about favicons being fiddly comes from. Windows Vista added PNG payloads, every browser and shell in service since reads them, and the mask disappears because PNG carries a real alpha channel. Three images at 16, 32 and 48 pixels fit in a few kilobytes.
Why a ZIP and not one .ico
Browsers stopped being the only consumer of an icon. iOS wants apple-touch-icon.png at 180 pixels for a home-screen bookmark, and discards the alpha channel while compositing it. Android and installable web apps read a manifest and want 192 and 512 pixel PNGs. Shipping only a .ico leaves those requests to fall back on guesses, so the download is an archive: the icon file, the Apple icon, the manifest icons, site.webmanifest, and a head.html holding the exact tags. Unzip at your web root and paste four lines.
When the input is an SVG, the original bytes are copied into the archive untouched as favicon.svg and the tag list puts it first. A vector icon stays sharp at any pixel density and can answer a dark colour scheme through a media query written inside the file. Safari still ignores it, so the .ico keeps its place in the list with an explicit sizes attribute, the part that stops a browser preferring the SVG from fetching both.
Non-square input has two wrong answers
An icon slot is square and most logos are not. Cropping to the centre discards the ends of a wordmark. Padding to a square keeps everything and makes the readable part smaller. Neither is correct in general, so the choice is yours. The default pads with transparency, on the grounds that wasted margin is a visible and recoverable mistake, while a crop that removed half a word tends to look deliberate.
Padding will not rescue a 4:1 wordmark. Sixteen pixels tall, it resolves to about four pixels of grey mush. The real fix is a separate square mark: the first letter, the symbol with the type removed, whatever shape people already recognise at thumbnail size. Check the result at actual size in a browser tab rather than zoomed to 400 per cent in an editor, because the editor view flatters everything.
The maskable icon Android will crop
Android launchers apply their own mask to an installed app icon, a circle on one device and a rounded square on another, and they crop whatever you supplied to fit it. An icon with no declared purpose gets a white plate behind it and a size reduction on top. The maskable variant in the archive keeps your artwork inside the central 80 per cent safe zone and fills the rest with your background colour, so the mask eats padding instead of pixels that carried meaning.
Source resolution sets the ceiling on all of it. 512 pixels square is what the manifest asks for and what you should bring; anything smaller is enlarged to reach it, and the result note tells you when that happened. For the 16-pixel end, the useful discipline is the one used for type at small point sizes: fewer strokes, heavier weight, stronger contrast against both a light and a dark tab strip.
Questions
Do I still need favicon.ico if I have the PNGs?
Yes, for two reasons. Safari does not read the manifest icons or an SVG icon, and every browser will request /favicon.ico from your web root on its own if no link tag gives it something better, which shows up as a steady trickle of 404s in your logs. The .ico is also the only one of these files that a bookmark bar, a Windows pinned site and an RSS reader all understand. It costs about 5 KB.
Where do the files go, and what is head.html for?
The files go at your web root, so favicon.ico answers at /favicon.ico and site.webmanifest at /site.webmanifest. Absolute paths matter: a relative href resolves against the current URL, so an icon declared as favicon.ico will 404 on every page below the top level. head.html is not a page. It holds the four link tags and the theme-color meta already written with the right paths, types and sizes attributes, ready to paste inside your head element.
Why 16, 32 and 48 rather than a dozen sizes?
Because the rest stopped being read. Browser tabs use 16 or 32 depending on display density, the Windows shell uses 48 for desktop shortcuts and pinned tiles, and the 64, 96 and 128 entries that older generators emit are answered by the manifest PNGs on every platform that still cares. Three entries keeps the file small enough that nobody is tempted to skip it, and each one has a real consumer rather than being a hedge.
My icon turns to mush at 16 pixels. What can I do?
Accept that 16 by 16 is 256 pixels in total, and design for that budget rather than scaling down a mark built for a letterhead. Drop the wordmark and keep the symbol. Thicken strokes until they are at least one pixel wide at the final size, which usually means about a third of the weight that looks correct at 512. Raise the contrast between figure and ground, then check it on a dark theme, where a navy mark disappears.