Favicon Sizes — PWA Manifest Icons You Actually Need

webdev favicon-generator tools

Ship a crisp 32×32 favicon and the browser tab looks fine. Then someone adds the site to their iPhone home screen and gets a blurry upscaled square with rounded corners eating your logo. That is not a “Safari quirk.” You never provided the sizes the platform asked for.

In 2026 you still need a small set of raster sizes, optional SVG for modern browsers, and an honest manifest.webmanifest icon list if you care about installability.

What still matters (and what you can drop)

Browser tab / bookmarks. A classic favicon.ico with 16 and 32 (sometimes 48) covers legacy paths. Many sites also serve favicon-32x32.png and favicon-16x16.png via <link rel="icon">.

iOS home screen. Apple does not read your tiny ICO. Use apple-touch-icon — commonly 180×180 PNG. Without it, iOS grabs a screenshot-like crop or upscales garbage.

Android / PWA install. manifest.webmanifest icons should include at least 192×192 and 512×512. Maskable icons need safe-zone padding so adaptive icons do not crop your mark.

SVG favicon. Great where supported (rel="icon" type="image/svg+xml"). Do not assume it replaces PNG for PWA or iOS. Safari support improved, but install surfaces still want raster.

SurfacePractical sizeNotes
Tab favicon32×32 (plus 16)ICO or PNG
apple-touch-icon180×180PNG, no transparency quirks if possible
Manifest192 + 512Include purpose: "any" and maskable variants
Windows tiles (optional)150 / 310Only if you still ship browserconfig

A minimal HTML + manifest wiring

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
{
  "name": "Example",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-512-maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Generate the pack from one master SVG or 1024px PNG so every size shares the same mark. An online favicon size generator is enough when you do not want a Node pipeline for a marketing site.

Design rules that survive masks

  • Keep the logo inside ~80% of the canvas for maskable icons. Full-bleed wordmarks get clipped on Android adaptive icons.
  • Prefer solid or simple backgrounds for small sizes. Hairline strokes vanish at 16px.
  • Do not rely on a single “one size fits all” 32px export. Upscaling is what made the iOS home screen look amateur.
  • Cache carefully: favicons are aggressively cached. Change the filename or query string when you rebrand.

Common failure modes

Only SVG. Desktop Chrome may look sharp; install prompts and older WebViews still need PNG.

Manifest icons point to 404. Lighthouse and installability checks fail silently in user perception — the install UI just looks wrong.

ICO that is actually a renamed PNG. Some CDNs and old clients choke. Generate a real multi-resolution ICO or skip ICO and use explicit PNG links if your audience is modern-only — just be deliberate.

Different logos per size. Users notice when the tab icon and the home-screen icon disagree. Treat favicon generation as a brand export, not a one-off crop.

FAQ

Do I still need favicon.ico in 2026?
Useful for legacy crawlers and odd clients that request /favicon.ico by default. Cheap insurance alongside PNG/SVG.

Is 512×512 enough by itself?
For many PWAs, 192 and 512 cover install. You still want apple-touch-icon separately for iOS bookmarks/home screen.

Can I use the same 512 file for maskable?
Technically yes, visually no — without safe padding, adaptive shapes will crop. Export a dedicated maskable asset.

Ship a small, boring icon set. The “one 32px favicon” era ended the first time someone long-pressed Add to Home Screen.