How to make a favicon: sizes, formats, and what browsers actually load

“Make a favicon” sounds like one file, and in 1999 it was: a 16×16 favicon.ico at the site root. In 2026 a complete favicon is a small set of files — an ICO for legacy and root-fallback requests, a PNG for iOS home screens, two PNGs for the web app manifest, and optionally an SVG that handles every size and dark mode at once. The good news: the set is small, the head markup is four lines, and everything derives from one source image.

Which sizes actually matter in 2026

Favicon advice pages love 30-line checklists with sizes for browsers that no longer exist. The set that current platforms actually load:

• 16×16 and 32×32, inside favicon.ico — browser tabs, bookmarks bar, history. 16px is what most tabs render; 32px covers high-DPI displays and Windows taskbar pins. Packing both into one ICO is the conventional and safest delivery.
• 180×180 PNG, apple-touch-icon — what iOS uses when someone adds your site to their home screen, and what Safari shows in favourites and share sheets. iOS ignores ICO and SVG here; this must be a PNG.
• 192×192 and 512×512 PNG, in the manifest — declared in manifest.webmanifest, not in a link tag. Android and desktop Chrome use 192px for home-screen icons and require 512px for the install splash screen; both are the baseline for a site to count as installable.

That’s it. Sizes like 57, 76, 114, and 152 belong to retired iOS generations, which all scale the 180px icon down fine. Shipping them adds requests, not compatibility.

ICO vs PNG: why both still exist

ICO is a container format: one .ico file holds several images at different sizes, and the browser picks the best match. That, plus history, is why it survives. When a page declares no icon at all, browsers request /favicon.ico from the site root on their own initiative — the WHATWG HTML standard documents this fallback — and plenty of non-browser clients (feed readers, link unfurlers, crawlers) request that exact path without ever parsing your HTML. A root-level ICO is the one icon that works with zero markup.

PNG wins everywhere a single explicit size is declared: it compresses better, every tool exports it, and both apple-touch-icon and manifest icons require it. So the answer to “ICO or PNG?” is: one ICO at the root, PNG for everything else. (For a broader look at when PNG is the right raster format at all, see PNG vs JPG vs WebP.)

SVG favicons: one file, every size — almost

Chromium browsers and Firefox accept <link rel="icon" href="/icon.svg" type="image/svg+xml">. An SVG favicon is resolution-independent, usually smaller than a multi-size ICO, and — uniquely — can carry a <style> block with a prefers-color-scheme media query, so the icon recolours itself against dark tab bars. No raster format can do that.

The catch is Safari: its SVG-favicon support is late and patchy, and iOS never uses SVG for touch icons. So SVG is an enhancement, not a replacement — declare it first and keep the ICO as fallback. Browsers that understand SVG take it; the rest fall through. If your logo already lives as an SVG, you also have the ideal favicon source: render it to crisp PNGs at exactly the sizes above with an SVG to PNG converter rather than scaling a raster export.

How to generate the set from one image

Start from a square source at 512×512 or larger, or an SVG. Design for the small end: a favicon is judged at 16 pixels, where thin strokes, gradients, and wordmarks turn to mud. Strong silhouette, high contrast, minimal detail. Then downscale the source to each target size — 180, 192, 512 as PNGs, 16 and 32 packed into the ICO. Each size should be resampled from the large original, not from another small size, so edges stay sharp; the same principle covered in resizing images without quality loss.

Doing it by hand works too — any decent image editor exports the PNGs, and ImageMagick builds the ICO (magick icon-512.png -define icon:auto-resize=32,16 favicon.ico) — but a generator exists precisely because five exports and a container format is tedious to get right once, let alone every time the logo changes.

The minimal head markup that covers everything

Four declarations, plus one file that needs none:

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

The manifest file then lists the 192 and 512 PNGs in its icons array. If you skip the SVG, drop the first line; if you skip PWA support, drop the last. The sizes="32x32" on the ICO line is a pragmatic hint that stops some Chromium versions from preferring the ICO over the SVG. And regardless of markup, keep favicon.ico physically at the site root for everything that never reads your HTML.

Dark mode

Browser tab bars come in light and dark, and a near-black logo vanishes on a dark theme. Two strategies: the SVG media-query trick above, which swaps colours automatically in browsers that take SVG favicons; or — covering every format — design defensively, giving the mark a contrasting outline, a filled background shape, or a mid-tone palette that reads on both. Most large sites do the second, because ICO and PNG will be served to a lot of clients either way.

Common mistakes

• Upscaling a 16px source. The classic failure: someone finds an old favicon.ico, blows it up to 512px for the manifest, and ships a blurry install icon. Generation only works downhill — always from the largest original.
• Missing apple-touch-icon.Without it, iOS renders a miniature screenshot of your page as the home-screen icon. It’s the most commonly forgotten file because desktop testing never surfaces it.
• No root favicon.ico. Link tags cover browsers, but the silent /favicon.ico requests from bots and older clients 404 — noisy in logs and iconless in feed readers.
• Transparent icons that assume a light tab bar. Test the 16px render on a dark theme before shipping.
• Forgetting cache-busting.Browsers cache favicons aggressively. After a redesign, change the file name or add a query string, or you’ll be staring at the old icon for weeks.

Short version: one 512px source image; generate 16/32 into an ICO at the root, a 180px apple-touch-icon, and 192/512 manifest PNGs; optionally lead with an SVG for sharpness and dark mode; four lines of head markup. Twenty minutes, once — and every tab, bookmark, home screen, and install prompt shows your mark instead of a grey globe.