Favicon Sizes 2026: Every Size You Actually Need (And Which Ones to Skip)

Quick answer: what size should a favicon be?

The standard favicon size is 32×32 pixels for browser tabs, with 16×16 as the smallest layer. But one size is not enough any more, because phones and installed web apps use much larger icons. A complete favicon set in 2026 is five sizes:

1. 16×16 — browser tabs on standard screens (inside favicon.ico).
2. 32×32 — browser tabs on high-density screens, Windows taskbar.
3. 180×180 — Apple touch icon for iPhone and iPad home screens.
4. 192×192 — Android home screen and the install prompt.
5. 512×512 — Android splash screen and app install surfaces.

Add a 48×48 layer to favicon.ico for Windows and you are done. This guide is about dimensions; for which file type to use at each size, see ICO vs PNG vs SVG.

Favicon size cheat sheet

The favicon generator exports every "Yes" and "Recommended" row in one ZIP, including a favicon.ico with 16, 32, 48 and 64 px layers.

Browser tab sizes: 16×16 and 32×32

Tabs are drawn at 16×16 CSS pixels. On a standard screen that is 16 real pixels; on a Retina or high-DPI screen it is 32 or more. That is why you ship both: the 16 px version for crisp rendering at 1×, the 32 px version so high-density screens are not upscaling a tiny bitmap.

Design for 16 px first. If your logo is unreadable at that size, no amount of extra sizes will fix it — simplify the mark, thicken strokes, or switch to a single letter (see how to make a favicon from text).

favicon.ico sizes: which layers to include

favicon.ico is a container with several sizes inside. The useful layers are 16, 32 and 48 px; 64 px is a harmless extra for high-DPI Windows. A 256 px layer only matters for large Windows desktop shortcuts and roughly triples the file size, so leave it out unless you need it. The favicon ICO generator previews each layer at actual size before you download; the PNG to ICO converter also offers 128 and 256 px layers for desktop icons.

Apple touch icon size: 180×180

iOS uses one size for current iPhones and iPads: 180×180. The older 57, 60, 72, 76, 114, 120, 144, 152 and 167 px variants are no longer needed — iOS scales the 180 px file. Use a solid background (iOS fills transparency with black) and do not round the corners yourself; iOS applies its own mask. Full setup in the Apple touch icon section of the mobile guide.

Android icon sizes: 192×192 and 512×512

Chrome on Android reads icons from your web manifest. It needs 192×192 for the home-screen icon and 512×512 for the splash screen and install dialogs; without both, Chrome will not treat your site as installable. The old Android density ladder (36, 48, 72, 96, 144 px) is not needed for websites. For maskable icons and the full manifest, see Android Chrome icon sizes.

What size favicon does Google Search use?

Google's favicon guidelines require a square icon of at least 8×8 pixels and recommend one larger than 48×48. You do not need a special file: Google uses the icon declared on your homepage, so a 48 px ICO layer or a 192×192 PNG in a <link rel="icon"> tag satisfies it. If Google still shows a generic globe, the cause is almost always crawling, not size — see favicon not showing in Google Search.

Sizes for platforms with one upload field

Always upload a large square image and let the platform scale it down. Scaling a 32 px source up to 512 px produces an obviously blurry home-screen icon.

Favicon sizes you can skip

Older generators and tutorials export twenty or more files. Most exist for platforms that no longer use them:

Extra files do no harm, but each one is another path to keep in sync. A small set you can verify beats a large set nobody checks.

Start from a big enough source image

Design at 512×512 or as a vector, then export down. Every size in the cheat sheet comes from that single source. Check three things before exporting:

• Square canvas — a non-square logo gets squashed or letterboxed.
• Padding — leave about 10% around the mark so it does not touch the edges (more for maskable icons).
• Legibility at 16 px — look at the 16×16 preview at actual size, not zoomed in.

Have a PNG, JPG or WebP logo? The image to favicon generator exports each size above with fit, crop and padding options, and the favicon package generator adds the ICO, site.webmanifest and HTML. Have an SVG logo? The SVG to favicon converter renders it at every size from the vector.

HTML and manifest for these sizes

<link rel="icon" href="/favicon.ico" sizes="32x32">
<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" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

{
  "name": "Your Site Name",
  "short_name": "YourSite",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#0ea5e9",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/"
}

The sizes value in each tag must match the real pixel size of the file. A 512 px image declared as 192x192 is downloaded and then scaled, wasting bandwidth.

Check your sizes

1. Open each file URL directly (/favicon.ico, /apple-touch-icon.png, /site.webmanifest) and confirm it loads.
2. Run your homepage through the favicon checker. It reports the 16 and 32 px tags, the Apple touch icon and both manifest sizes.
3. Hard-refresh the browser. If the old icon persists, follow the favicon not showing guide.