Quick answer: the modern favicon set is 16×16 and 32×32 in the browser tab, 48×48 for Windows and Google Search, 180×180 for iOS home screen, and 192×192 plus 512×512 for the Android manifest. Generate all of them from one square master of 512 pixels or more, and never upscale a small icon.

Why one .ico is no longer enough

A favicon used to be one file: favicon.ico, requested automatically at the site root, containing 16×16 and 32×32 layers. That still works for desktop tabs, but phones and installed web apps never ask for the .ico. An iPhone reads apple-touch-icon.png; Android reads the manifest. Ship only the .ico and the tab looks fine while the "Add to Home Screen" tile looks like a screenshot.

The complete set

Size File Surface
16×16 favicon-16x16.png Standard browser tabs
32×32 favicon-32x32.png Retina tabs, bookmarks bar
48×48 inside favicon.ico Windows shortcuts; Google Search uses a multiple of 48
180×180 apple-touch-icon.png iPhone/iPad home screen
192×192 icon-192.png Android home screen, install prompt
512×512 icon-512.png Android PWA splash, maskable icon
Any favicon.svg Modern browsers; vector, scales forever

A multi-size favicon.ico can hold the 16, 32, and 48 layers in one file at the root. The practical minimum set in 2026 is that .ico, the 180 apple-touch-icon, and the 192/512 manifest pair. An SVG favicon is optional but worth adding in modern browsers; it supports dark-mode variants and never needs resizing.

How the files are linked

The .ico works without any markup because browsers request /favicon.ico by default. The other sizes are wired up in the head:

  • <link rel="icon" sizes="32x32" href="..."> for the PNG tab icons.
  • <link rel="apple-touch-icon" href="..."> — one 180 file covers current iPhones; iOS scales it for older devices.
  • A manifest.webmanifest (or manifest.json) listing the 192 and 512 icons with type: "image/png" and purpose: "any maskable" for the maskable version.

Maskable icons are a separate design

Android masks the 192 and 512 icons into circles, rounded squares, and squircle shapes depending on the launcher. A regular icon fills the full square and gets cropped — corners and small details disappear. Maskable icons keep the mark within the inner safe zone, roughly the central 80% of the canvas (a 10% margin on every edge). If you have ever added a product to your home screen and its logo looked cut off, this is why.

The one-master rule

Generate everything from one square master of at least 512 pixels, ideally 1024. The vector logo or a high-resolution PNG is the source; the sizes are exports. Working the other way, upscaling a 32-pixel tab icon into a 512-pixel install icon, produces a blurry tile that reads as unfinished.

Tiny-size design judgment

The favicon is the hardest asset in a brand set because it is judged at 16 pixels. A wordmark that looks great in a header becomes a smudge in a tab; the favicon usually has to be simplified to the mark alone, often dropping the wordmark entirely. App icons face the same problem more severely — the app icon size guide covers the store submissions. The difference between a favicon and a full launch set is just scale: the same brand produces a 512 master for the tab and a set of social cards, and Neatico can generate the icon and the surrounding launch assets together from one description.

Frequently asked questions

What is the standard favicon size? Tabs render 16×16 or 32×32, but a complete set adds 180×180 for iOS and 192/512 for Android. A multi-size favicon.ico plus the PNGs covers every surface.

What size does Google Search require? Google uses a square icon at a multiple of 48 pixels, so include a 48×48 layer in the favicon.ico.

Why does my iOS home screen icon look blurry? The browser is falling back to a screenshot because apple-touch-icon.png is missing. Add a 180×180 PNG, with no transparency.

What is a maskable icon? An Android manifest icon designed with the mark in the central 80% safe zone, so launchers can crop it into any shape without cutting the logo.