Favicon Sizes You Actually Need

Favicon generators have a habit of producing thirty files and a page of markup, most of it aimed at platforms that no longer exist. The list that genuinely earns its place today is short, and one of the entries on it matters far more than the browser tab it is named after.

The short list

• favicon.ico containing 16, 32 and 48 — for the bare path browsers and crawlers request when nothing tells them otherwise.
• A 32 pixel PNG — the crisp version modern browsers prefer for a tab.
• apple-touch-icon.png at 180 — used when someone adds your site to an iOS home screen.
• 192 and 512 pixel PNGs — referenced from a web app manifest, for install prompts and splash screens.

An SVG icon is worth adding if your mark is simple enough to draw as one, because it stays crisp at every size from one file. It does not replace the ICO, which is still what gets requested when no markup is involved at all.

Yes, the ICO still matters

It is the oldest part of the arrangement and the one most often skipped on the grounds of being obsolete. It is not. Browsers, feed readers, link previewers, and a long tail of tools request /favicon.ico directly without reading any markup first, and a 404 there is a missing icon in all of them.

The format is also more capable than its reputation: a single ICO holds several sizes, and each entry can be a PNG. One small file covers the tab, the bookmark bar and the desktop shortcut at their proper resolutions.

The reason to care: search results

Google shows a favicon beside every result on mobile search. A site without one gets a generic placeholder next to every listing it has earned, which is a click-through cost on traffic already won rather than a cosmetic gap in a browser tab.

For that to work the icon has to be crawlable — not blocked in robots.txt — at a URL that stays stable, and it has to be square. Google resizes whatever it finds, and its own guidance asks for a size that is a multiple of 48 pixels, so an entry at 48 or larger is worth having even though tabs never use it.

The favicon is the only piece of branding that appears next to your listing before anyone has decided whether to click.

The markup

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Four lines, and every one of them does something. Drop the SVG line if you do not have one, and drop the manifest line unless the file actually exists — a link to a missing manifest is a 404 on every page load for no benefit.

Designing for 16 pixels

Sixteen by sixteen is 256 pixels in total. That is not enough for a wordmark, a gradient, a thin outline or fine detail of any kind. The favicons that work are one bold shape with strong contrast against both a light and a dark browser chrome — very often a single letter, or one element lifted out of a larger logo.

The honest test is to look at the 16 pixel version at 16 pixels, not enlarged. If it reads there, everything above it will be fine. If it does not, no amount of detail in the 512 version rescues it, and the answer is to simplify the artwork rather than to try again at a higher resolution.

One thing to check afterwards

Favicons are cached aggressively, sometimes beyond an ordinary refresh. After changing one, check in a private window before concluding it has not worked, and expect search results to take considerably longer than the browser to catch up.