The direct answer: there is no single favicon size. The browser tab wants 16×16, its high-DPI twin wants 32×32, Windows shortcuts want 48×48, iOS home screens want 180×180, and Android wants 192×192 and 512×512. The classic way to cover the first three is one ICO file; the rest are PNGs plus a few lines of markup. This guide is the complete map: every size, where it is used, and the exact code to serve it.
The size table
| Size | Used by | Format |
|---|---|---|
| 16×16 | Browser tabs, address bar, history | ICO |
| 32×32 | High-DPI tabs, retina displays | ICO |
| 48×48 | Windows desktop shortcuts, site install icons | ICO |
| 180×180 | iOS home screen (apple-touch-icon) | PNG |
| 192×192 | Android home screen, Chrome app drawer | PNG |
| 512×512 | Android splash screens, PWA install | PNG |
Six sizes cover every mainstream context. Everything below explains why each row exists and where the edge cases live.
ICO: three sizes in one file
The ICO container is the original favicon format, and its one superpower is holding multiple resolutions in a single file. A well-built favicon.ico carries 16, 32, and 48; the browser or OS reads the directory at the top of the file and picks the entry that fits. The byte-level layout of that directory is in our ICO format deep dive.
The reason to hand-author the small sizes instead of letting a renderer downscale your logo: at 16×16 there are 256 pixels in total. Automatic downscaling blurs fine shapes into mush; a version drawn or at least retouched for that size stays recognizable. Drop your source into PNG to ICO and the standard sizes are packed for you.
Two facts make ICO unavoidable even in 2026. Every browser ever shipped reads it. And browsers automatically request /favicon.ico for any page that declares nothing — feed readers, link previews, and crawlers look there too. A root-level favicon.ico is coverage you get for free.
PNG favicons and the sizes attribute
Modern browsers accept PNG favicons declared per size:
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
The sizes attribute is what lets a browser pick before downloading — without it, every declared file may be fetched and the winner chosen after the fact. PNGs are smaller than ICOs at the same resolution and simpler to generate, but they only work where the browser understands the declarations. Older browsers ignore them entirely, which is why PNG supplements the ICO rather than replacing it.
apple-touch-icon: 180×180
When someone saves your site to an iOS home screen, Safari looks for apple-touch-icon.png. The standard size is 180×180; iOS scales it down for smaller contexts and — this surprises people — rounds the corners and may add a background itself. Ship a square image with an opaque background; transparent regions will be composited onto black on older iOS versions.
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
The file is also fetched by default from /apple-touch-icon.png even without the tag, same convention as favicon.ico.
Android and Chrome: 192 and 512 via the manifest
Android Chrome reads icons from the web app manifest. Two sizes matter: 192×192 for the home screen icon and 512×512 for splash screens and install prompts.
{
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}
Reference the manifest once in your pages:
<link rel="manifest" href="/site.webmanifest" />
SVG favicons: promising, not yet sufficient
An SVG favicon scales to every context from one file, and Chromium and Firefox have supported it for years:
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
The holdout is Safari, which still ignores SVG favicons — its only SVG-ish mechanism is mask-icon, a monochrome SVG for pinned tabs with a theme color:
<link rel="mask-icon" href="/icon-mask.svg" color="#1a1a1a" />
SVG is a fine progressive enhancement layered on top of the ICO and PNGs. It is not yet a replacement.
The complete head setup
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
Six files, six lines, every context covered. The sizes="any" on the ICO line tells browsers the container holds multiple resolutions so they pick rather than assume 16×16.
Generating the files
Start from a square source at 512×512 or larger, then: PNG to ICO or WebP to ICO for the container, resized PNGs for 180/192/512, and the manifest wired by hand. The full workflow from raw logo to deployed icon is in how to make a favicon. Everything in the converters runs locally in your browser — the only upload involved is you pushing the files to your own server.