The favicon guide — every size, when to use it, and why

A favicon is the tiny icon that appears in a browser tab, a bookmark, a phone's home screen, a search result. It sounds trivial, and it is — right up until you realize that every place it appears expects a different size, a different format, and sometimes a different aspect ratio. The naive approach (one favicon.ico at 16×16) hasn't been sufficient since about 2014.

What follows is a plain description of what each file is for, what size it needs to be, and the minimum HTML snippet to make browsers pick the right one.

Why six files instead of one

In the beginning, there was favicon.ico — a 16×16 icon file at the root of your site that Internet Explorer would fetch automatically. For years, that was the whole story.

Then displays got sharper. The iPhone introduced Retina screens, and Apple added a home-screen icon standard (180×180 is the current size; earlier versions of iOS went through a confusing series of smaller sizes). Android followed with adaptive icons at 192 and 512. Browser tabs got higher-DPI, needing at least 32×32. Progressive Web Apps added new requirements for splash screens and app shelves.

The result: by the late 2010s, a complete favicon set meant six to ten files. The trend since then has been consolidation — modern browsers accept a single SVG favicon at any size, and the Apple/Google size jungle has stabilized. But legacy browsers and old operating systems still exist, so the minimum responsible set is still six files plus an ICO.

The six sizes that matter

Here's what each size is for:

16×16 — browser tab favicon on standard-DPI displays. The smallest size you'll need. Your logo has to be legible here, which is an actual design constraint (see below).

32×32 — browser tab favicon on Retina / high-DPI displays. Most modern browsers pick the 32 when available and downscale to 16 when they don't see one. In practice, 32 is more important than 16 — if you only ship one PNG, ship the 32.

48×48 — Windows site-pinning icon, and the fallback inside multi-resolution .ico files. Less important than 16 and 32 but traditionally included.

180×180 — Apple touch icon. When an iOS user adds your site to their home screen, this is the icon they see. Called "apple-touch-icon" in the HTML. The size has shifted over the years (57, 72, 114, 144, 152 were all previous values); 180 is the current sweet spot.

192×192 — Android home-screen icon, and the minimum icon for a Progressive Web App manifest. If you have a PWA manifest, Android pulls from this.

512×512 — PWA splash screen, and the high-DPI fallback for everything bigger. Also used by some app stores and share cards.

That's it for PNGs. Six files, with a clear role for each.

The case for favicon.svg

If your logo is vector, ship a favicon.svg. Every modern browser (Chrome, Firefox, Safari 14+, Edge) will prefer it over the PNGs, which means crisp rendering at any size with no upscaling.

A few gotchas:

Strip the editor metadata. Illustrator and Figma leave behind layer names, stroke caps, and other junk that can easily triple file size. A clean favicon SVG should be under 2 KB.
Use fill currentColor where it makes sense. Some browsers pass a color-scheme preference to SVG favicons, so you can automatically switch to a light version on dark backgrounds. This isn't universal but it's nice when it works.
Keep it simple. An SVG favicon should be a single-color mark or a very small palette. Complex illustrations at 16×16 just become noise.

The fallback chain: browsers that can't render SVG fall through to the PNG or ICO. So you still need those.

The multi-resolution .ico file

A .ico file is a container that can hold multiple PNGs at different sizes. Good practice is to include 16, 32, and 48 in a single favicon.ico. Browsers pick the closest match automatically.

You need this because:

Older IE versions and some RSS readers look for /favicon.ico specifically and ignore the HTML <link> declarations
Some link-preview cards pull the ICO as a fallback
It's the one file browsers request by default if you forget to declare anything

Making a multi-res ICO by hand is annoying — it's a binary format with a specific header structure. Most people generate theirs with a tool. (Our Favicon Foundry does this in the browser, no uploads.)

The HTML snippet

Drop this into your <head>:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="alternate icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<meta name="theme-color" content="#F4A940">

The order matters a little. Browsers pick the first matching rel="icon", so SVG goes first to let modern browsers prefer it. The ICO is declared as alternate icon to signal it's a fallback. The 32 PNG comes before the 16 because browsers on Retina displays will pick the higher-resolution option.

For a PWA manifest you'll also want a manifest.webmanifest file that references the 192 and 512 — but that's a separate concern and only matters if you want the "Add to Home Screen" prompt.

Designing for 16 pixels

Here's the constraint that actually matters: your favicon has to work at 16×16. That's about the size of a capital letter in body text.

Things that work at 16:

A single bold letter or initial
A simple geometric shape with strong contrast
A monochromatic logo with generous strokes

Things that don't work at 16:

Thin lines — they get washed out or disappear entirely
Text with more than one or two letters
Photographic imagery or gradients
Anything with fine internal detail

If your full-size logo doesn't survive being scaled down to 16 pixels, that's not the favicon's fault — that's a sign your logo needs a simplified favicon variant. Plenty of brands do this: a full logotype on the site, a single mark on the favicon.

Testing your favicons

The easiest test is to actually pin your site in a browser tab on a high-DPI display, bookmark it, add it to a phone's home screen, and look at the results. Browsers cache favicons aggressively, so you'll usually need to hard-refresh or clear site data after updating.

Tools that help:

Chrome DevTools → Application tab → Manifest section shows what it's loaded
Safari → Develop menu → "Show Web Inspector" → Network tab to confirm the right file got fetched
A physical phone is worth more than any simulator

If the favicon doesn't update when you think it should, 95% of the time it's a cache. Add a cache-buster to the URL (/favicon.svg?v=2) to force a refresh.

Common mistakes

A single large PNG renamed .ico. Browsers are lenient and often accept this, but not all clients do. Make a real multi-res ICO.

Transparent PNGs on dark backgrounds. If your favicon is dark-on-transparent and the browser's tab background is also dark, the user sees nothing. Either use a light version or include a subtle background.

Non-square aspect ratios. All favicon sizes are square. A horizontal logo gets letterboxed or stretched depending on the viewer. Either pick the square mark from your brand system or center your logo with padding.

Forgetting the theme-color meta tag. This colors the browser chrome on mobile (Chrome on Android, Safari on iOS). A branded color here is a tiny detail that reads as intentional.

Skipping the PWA manifest if you plan to be installable. If "Add to Home Screen" is important, the manifest matters more than any individual favicon — it's where browsers get the install-prompt icon, name, and theme color.

The short version: ship the six PNGs, the ICO, an SVG if you can, and the HTML snippet above. You'll be covered for essentially every browser anyone still uses. If you want all of that in one drop, the Favicon Foundry generates the whole bundle from a single source image in your browser.

Made with love by a very serious person pretending not to be. Tooly McToolface is a workshop of free, client-side web tools. If you liked this, the image compression guide and HEIC problem essay are natural next reads.