The favicon accumulated requirements for twenty-five years and shed almost none of them, so the advice you find is a museum: Windows tile colours, a dozen Apple sizes, formats for browsers that no longer exist. Almost all of it can go.
What actually needs to exist
An SVG. The modern answer, and the one that solves the most at once. It is sharp at any size on any screen, it is usually smaller than the PNGs it replaces, and it can respond to dark mode. Every current browser accepts one.
An ICO, containing 16 and 32 pixel versions. This is the fallback, and the reason to keep it is that a great many things still request /favicon.ico from the site root without being asked to: feed readers, chat clients that unfurl links, older browsers, and assorted crawlers. It costs a couple of kilobytes to satisfy all of them.
A 180 × 180 PNG for apple-touch-icon, used when someone saves the site to a home screen on iOS. Without it, the icon becomes a screenshot of your page, which is never what anyone wanted.
A 512 × 512 PNG referenced from a web manifest, for Android home screens and installable web apps. A 192 alongside it is conventional and harmless.
That is four files. Everything beyond them exists to serve platforms that either read these instead or stopped existing.
Why the ICO is a container
ICO is not really an image format so much as a wrapper holding several images at different sizes, and the operating system picks the one it wants. That is why a "16×16 favicon" and a "32×32 favicon" can be the same file.
It matters because the two sizes want different artwork, which is the point of the next section. Putting one 32-pixel drawing in and letting everything downscale it to 16 defeats the entire purpose of the format.
The constraint nobody mentions
A 16-pixel icon is 256 pixels in total. That is smaller than a full stop in this paragraph is on your screen. It is not a small canvas; it is barely a canvas.
Almost every failed favicon fails the same way: someone took a logo — a wordmark, a detailed emblem, something with a thin outline — and resized it to 16 pixels. The result is a grey smudge, and no amount of sharpening rescues it, because the information is not blurred. It is gone.
What works at that size is one shape, one or two colours, and thick strokes. A single letter. A silhouette. A geometric mark. If your logo is a company name, the favicon is its first letter, and that is not a compromise — it is what every recognisable favicon you can picture actually is.
The honest test is to look at it at real size, in a real tab, next to eight other tabs. Not zoomed to 400% in an editor, where everything looks fine.
Dark mode
Browser tab strips are dark for a large share of people now, and a mark drawn in near black disappears against them.
The robust answer is not a second file. It is to design the mark so it survives both: mid-tone colours rather than near-black or near-white, and no reliance on a white background being there. A mark that only reads against white is a mark that vanishes for half your visitors.
An SVG favicon can additionally carry a prefers-color-scheme rule inside it and swap colours, which is elegant and works in the browsers that accept SVG favicons. Treat it as an improvement on a design that already worked, not as the fix.
Why yours is not updating
Favicons are cached aggressively and separately from everything else on the site, in a store that a normal hard refresh does not clear. This causes a great deal of unnecessary debugging.
Before changing anything, open the icon URL directly — /favicon.ico — and see what comes back. If the new icon is there, the file is fine and the tab is lying. The reliable ways to force it are a private window, or serving the icon under a new filename.
Making them
A generator takes one square source and produces the set with the markup to match. Start from something square and simple — if your source is a wide logo, crop it to the one element that reads small before you begin, rather than after seeing the result.
Doing it in the browser has a specific advantage here: the source is very often the company logo, which is not a file people are casually comfortable uploading to a site they found in a search.
The short version
An SVG, an ICO with 16 and 32 inside it, a 180 PNG for iOS and a 512 for Android. Design for 16 pixels first and let the large sizes take care of themselves — never the reverse. One shape, thick strokes, mid-tone colours that hold up on a dark tab strip.
And when it does not appear to have changed, check the URL before changing anything.