What size should a favicon be?

A favicon is drawn at whatever size the surface needs, and each surface needs a different one. The tab is roughly 16×16 CSS pixels, but on a 2× display that is 32 physical pixels, and the new-tab page, bookmarks bar and history draw it larger again. The browser does not resize intelligently: given only a 16×16 file it upscales that file, which is why the icon looks soft rather than sharp.

Declaring several sizes lets each surface take the closest match. The sizes attribute is what makes this cheap — the browser reads it and downloads the one file it wants instead of all of them.

An ICO is a container, not a format: one file can hold several images at different sizes, and modern ICOs usually store them as compressed PNG data. That is the whole reason to keep one — a single file at /favicon.ico answers every request that follows the old convention, including crawlers and browsers that look there without reading your markup.

Packing 16, 32 and 48 into it covers the range that convention expects. An ICO holding a single 16×16 image is no better than a single PNG, and a PNG renamed to .ico is not an ICO at all — it is a PNG with a misleading name, and some consumers reject it outright.

Safari does not reuse your tab icon for the home screen. Without a 180×180 apple-touch-icon, iOS substitutes a screenshot of the page, which is the usual reason a home screen icon looks nothing like the artwork you uploaded.

• Opaque. Transparency is composited onto black, so a transparent logo gains a black plate.
• No rounded corners. iOS applies its own mask; pre-rounded artwork ends up with visible corners inside the mask.
• No gloss. The highlight effect was dropped years ago, and artwork drawn for it looks wrong now.

Chrome reads the icon for an installed site from the web manifest, not from your link tags. Two entries are worth having: 192×192 for the home screen icon and 512×512 for the install dialog and splash screen. A manifest with no icons, or with only a 32×32 entry, produces a generic or blank icon.

If you add a maskable icon, keep the artwork within the centre 80% of the canvas — the platform crops the rest into whatever shape it uses that year.

A pinned tab uses rel="mask-icon", which wants a single-colour SVG drawn on a transparent background; Safari recolours it to the color you declare. It is a different asset from the tab favicon, and it is optional — but if you declare one, it has to be an SVG.

Search results follow their own rule rather than the browser’s: the icon has to be square, its dimensions a multiple of 48px (48, 96, 144 and up), and it has to be crawlable — publicly reachable, not blocked in robots.txt. Sizing is the easy half; the long half is waiting for the next crawl, which runs on its own schedule and cannot be forced.

Every size above is an export, so what you start with sets the ceiling. A square source at 512×512 or larger — or an SVG, which is resolution-independent — can be exported down to every size cleanly. A 64×64 logo cannot: scaling up invents detail that is not there.

• Keep the artwork square; non-square art gets letterboxed or cropped.
• Leave a small margin, especially for the Android mask.
• Check the design at 16×16. Detail that reads at 512 turns to mud at 16, and that is the size people actually see most.

<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

The ICO line handles legacy requests, the two PNGs give the tab an exact match at each density, and the last two cover iOS and installed apps. If you also use an SVG favicon, declare it before the PNGs and keep a 32×32 PNG as the fallback.