The Five Favicon Sizes That Actually Matter in 2026
Browsers, iOS, and Android each read a favicon from a different file at a different size — five sizes cover all of them, and most of the longer checklists you'll find online don't do anything anymore.
Search "favicon sizes" and you'll find checklists demanding 16, 32, 48, 57, 60, 70, 72, 76, 96, 114, 120, 144, 150, 152, 180, 192, 310, and 512 — plus a few more for Windows tiles nobody's shipped since 2015. Almost none of those numbers correspond to anything a current browser, phone, or OS actually reads. Five sizes cover every surface that still matters.
The .ico file: 16 and 32 (sometimes 48)
A browser tab, the bookmarks bar, and a browser's history dropdown all pull from favicon.ico — and they don't request one fixed image, they request whichever size fits the pixel space available. That's the part the "just make a 32×32 PNG and rename it" advice misses: favicon.ico isn't one icon, it's a container. A single .ico file can embed several PNGs at different sizes, and the browser picks whichever is closest to what it needs. 16×16 covers a standard tab; 32×32 covers a bookmark or a high-DPI tab; a 48×48 gets added for larger contexts like a new-tab tile in some browsers. Pack all three into one .ico and every desktop surface is covered by a single file.
apple-touch-icon: 180×180, and only 180
iOS ignores favicon.ico entirely for anything related to the home screen. When someone taps "Add to Home Screen," Safari looks for a <link rel="apple-touch-icon"> pointing at a PNG, and it wants 180×180 — the size needed for the largest current iPhone display, which iOS then scales down cleanly for older or smaller devices. Older tutorials list a spread of sizes (57, 60, 72, 114, 120, 144, 152) for specific iPad and iPhone generations going back over a decade; shipping one size iOS can safely downscale makes that whole list unnecessary now.
The PWA pair: 192×192 and 512×512
If your site can be installed as a home-screen app, the install flow reads from a completely different source: the web manifest, not a <link> tag at all. Chrome and Android's install criteria look for at least a 192×192 icon in the manifest's icons array (used on the home screen and in the app switcher) and a 512×512 icon (used for the splash screen shown while the app loads, and for app-store-style install prompts). Neither size is optional if you want the install prompt to appear at all.
The SVG option, and why it's not a full replacement
Current Chrome, Firefox, and Safari also accept a single SVG referenced with rel="icon" and no fixed dimensions — the browser rasterizes it on demand at whatever pixel size the tab actually needs, so one vector file replaces the raster ladder in browsers that support it. The gap is coverage: an SVG favicon still falls back to favicon.ico in browsers that don't support it, and it does nothing for the two contexts above — the iOS home screen and the Android manifest — which only ever read a PNG. Treat SVG as an addition on top of the .ico and the two PNG sizes, not a substitute for them.
One square source is genuinely enough
None of the five sizes above need a separately drawn asset. They're all downscaled from a single high-resolution square source — 512×512 or larger covers it. Spellkit's Favicon Generator takes exactly that as input: upload one image and it resizes it into the .ico (with 16, 32, and 48 embedded), the 180px apple-touch-icon, and the 192/512 PWA pair, plus a manifest and the four <link> tags that wire them together — all generated locally in the browser.
Why non-square logos come out letterboxed
Every icon in that bundle is generated by containing the source inside a square canvas — scaled to fit and centered, never cropped. A square logo fills the whole icon edge to edge. A wide wordmark or a tall vertical logo comes out with visible transparent padding on two sides instead, because there's no crop of a non-square source that wouldn't chop off part of the design. If you want the icon to fill the tab with no padding, crop the source to a tight square yourself before uploading — the tool won't guess which part of a rectangular logo is safe to cut.
The maskable-icon gotcha on Android
Android's adaptive-icon system can mask a PWA's 192 or 512 icon into a circle, squircle, or rounded square depending on the device's icon theme — and it does that by cropping, not by padding. An icon designed edge-to-edge, which is exactly what a tightly cropped square source produces, can lose its corners or the edge of a logo once Android's mask is applied. The standard fix is a second manifest entry marked "purpose": "maskable" pointing at a version of the icon with roughly 40% padding as a safe zone, so the mask has room to crop without touching the actual artwork. The generator here doesn't add that entry automatically, so if a favicon looks clipped specifically inside Android's app drawer, that's the safe zone it's missing — it needs a dedicated maskable variant, not just the same square icon reused.