A favicon, and the four lines that install it
An SVG icon, an .ico, an Apple touch icon and a manifest is the whole modern set. The twenty-tag lists are years out of date.
A favicon, and the four lines that install it
Most favicon instructions are years out of date. An SVG icon, an .ico, an Apple touch icon and a manifest is the whole modern set.
The sizes you actually need
The markup
A dark tab strip will swallow a black glyph
Favicons are usually drawn on white and tested on white, and the browser chrome they end up in is frequently not white. A black mark on a transparent background disappears almost entirely against a dark tab bar, and a white one vanishes on a light theme — in both cases leaving a tab that looks like it failed to load.
An SVG favicon can carry its own prefers-color-scheme media query and swap colours with the theme, which is the cleanest fix where it is supported. The more robust answer is to avoid the situation: give the icon its own background rather than relying on transparency, so it is legible against anything. A small coloured square with a light glyph on it works in every theme and at every size, which is why so many sites end up there.
Favicons cache harder than anything else
Browsers cache favicons aggressively and in a store of their own, separate from ordinary page assets. A new one can fail to appear for days, survive a hard reload, and ignore the cache-busting query string that works for every other file — which leads to a lot of time spent debugging an icon that was correct all along.
Before assuming anything is wrong, request the icon's URL directly in a new tab, which bypasses the favicon cache and shows what the server is actually returning. If that is right, the file is right. To force the browser to notice, changing the filename works far more reliably than changing a query string, because it is a genuinely different resource. And check in a private window, where the favicon cache starts empty.
Why so few files
An SVG favicon covers every browser that supports one, at every size, with no raster export. The .ico covers the rest. iOS ignores the SVG, so an Apple touch icon is still needed. Android reads the manifest.
The long lists of twenty link tags date from a period when every platform wanted its own file. Most of those files are no longer read by anything.
A dark-mode favicon is possible inside the SVG itself using a prefers-color-scheme media query in a <style> element. It works in Firefox and Safari and is ignored elsewhere, which is a reasonable enhancement.
Check it at sixteen pixels
A favicon is the smallest thing on a page. Detail that reads beautifully at 512px disappears entirely in a tab, which is why nearly every good favicon is one letter or one simple shape.
It also needs more contrast than body text, not less — the letterform is tiny and antialiasing eats a good part of it.
The tab is a crowded place
Your icon sits beside twenty others at 16 pixels. Distinctiveness at that size beats fidelity to a logo that was drawn for a letterhead.