Guide · favicon
Favicon sizes in 2026: what you still need
October 23, 2026 · 10 min read
SVG favicons work in Chromium and Firefox now, but ICO and PNG did not go away. Bookmarks, older Windows surfaces, and some crawlers still ask for the classic sizes. Here is a short set that covers a marketing site or web app without regenerating twenty files every time the logo changes.
The minimum set that still works
Start from one master mark (SVG or a large PNG). Export a multi-size favicon.ico with at least 16×16, 32×32, and 48×48. Link a dedicated 32×32 PNG for browsers that prefer PNG over ICO, and an apple-touch-icon at 180×180 for iOS Add to Home Screen.
PWA install icons (192 and 512, any plus maskable) belong in the web app manifest, not in every <link rel="icon">. Putting them in the head only makes the page heavier.
- favicon.ico: 16 / 32 / 48 inside one file
- favicon-32x32.png: explicit PNG for modern browsers
- apple-touch-icon.png: 180×180, usually opaque or high contrast
- icon.svg: optional, for browsers that support SVG favicons
- manifest icons 192 / 512: only if the site is installable as a PWA
HTML head that matches the files
Every href you declare has to exist, and sizes attributes should match the real pixel dimensions. A typical head uses favicon.ico with sizes="any", a 32×32 PNG, optional SVG, then apple-touch-icon (skip the old precomposed name).
In Next.js, Nuxt, or Astro, declare the same set once in metadata or config instead of repeating tags in every layout. The Launch Kit ZIP includes a head.html snippet you can paste or translate into that API.
- <link rel="icon" href="/favicon.ico" sizes="any">
- <link rel="icon" type="image/png" sizes="32×32" href="/favicon-32x32.png">
- <link rel="apple-touch-icon" href="/apple-touch-icon.png">
- Optional: rel="icon" type="image/svg+xml" for icon.svg
What you can stop generating
You do not need every legacy Android Chrome density for a marketing site. Those matrices made sense when you exported from Photoshop once a year. Keep the short list above and regenerate from SVG when the mark changes.
Skip 96×96 and odd Windows tile sizes unless you actually wire the matching meta tags. Most teams never do, so the files sit unused in /public.
Transparency and dark browser chrome
Transparent favicons look fine on light themes and often disappear on dark tabs. Test both. If the mark is a thin monoline glyph, give the favicon pack a soft plate or thicker strokes at 16px; keep the marketing logo transparent elsewhere if you want.
Apple touch icons sit on home screens with a forced mask. Prefer an opaque or strongly contrasted 180×180 so the glyph survives iOS rounding.
Workflow when branding changes
Keep a single source SVG in the repo. When marketing updates the mark, re-run the favicon generator, commit the new ICO/PNG/SVG set, and leave the HTML alone. That beats hunting which of twelve PNG paths drifted.