Leon Marchetti

This is a file at the root of a domain, so every hosting decision affecting paths affects it. A small icon in a tab, a larger one on a home screen, and a monochrome version for a themed toolbar are separate requests at separate paths, and a site that provides only the first gets a pixelated icon on a mobile home screen rather than a failure anybody notices. The formats are straightforward. An ICO file holds several sizes in one container and is the most compatible choice.

Separate PNGs at declared sizes work everywhere. An SVG icon works in current browsers and lets you use one file for any size, and it fails silently everywhere else. Discovery is by link tag and by convention.

A browser first looks at the root for a file with one of the conventional names, and a tag overrides that. A tag without a size attribute lets the browser pick, which is why declaring them is better. The cache is the part that makes this annoying to debug.

Browsers cache favicons aggressively and keep them past a deploy, so a fixed icon can appear broken for weeks. I cover cache busting on the query string, and why the file at the conventional path cannot be given one. A maskable icon is the current requirement, and it is a different shape with a safe area. An ordinary icon scaled into a mask gets its edges cropped, which looks fine until a device uses an aggressive mask.