A few years ago "add a favicon" meant dropping one favicon.ico in your site root. In 2026 that same site will look broken in at least four places: blurry in a retina browser tab, a generic globe in Google search results, a white square when an Android user saves it to their home screen, and a black blob on an iPhone.
The fix isn't hard — but the requirements have quietly multiplied. Here's the complete size set that actually matters in 2026, why each one exists, and a copy-paste HTML block at the end.
The 2026 favicon checklist
| Size | File | Where it's used |
|---|---|---|
| 16×16 | favicon-16x16.png |
Classic browser tabs |
| 32×32 | favicon-32x32.png |
Retina tabs, Windows taskbar |
| 48×48 | inside favicon.ico
|
Windows site icons, older browsers |
| 180×180 | apple-touch-icon.png |
iOS home screen, Safari pinned tabs |
| 192×192 | android-chrome-192x192.png |
Android home screen, Chrome PWA |
| 512×512 | android-chrome-512x512.png |
PWA splash screen |
| vector | favicon.svg |
Modern browsers, dark-mode adaptive icons |
Six files. Not optional if you care about how your site presents on mobile and in search.
Why each size survives
16×16 + 32×32 — the browser tab. 16×16 is the legacy default; 32×32 is what actually renders on high-DPI displays. Ship both. A tab icon that's only 16×16 gets smeared by the browser's upscaler on any modern laptop.
48×48 — inside the .ico. The .ico container can bundle multiple sizes in one file (16/32/48 is the common bundle), which is why a well-built favicon.ico is still the most compatible single file you can ship. Windows site pins and plenty of crawlers read it first.
180×180 — Apple's tax. iOS ignores your favicon entirely. When a user taps "Add to Home Screen", Safari reads exactly apple-touch-icon.png at exactly 180×180. One more trap: iOS composites transparency onto black — export on your brand background or your logo gets a black box.
192×192 + 512×512 — Android & PWA. These are read from site.webmanifest. 192 is the Android home-screen icon; 512 powers the full-screen splash when your PWA launches. Ship a 512 source and downscale — never upscale, it shows.
SVG — the modern bonus. Every evergreen browser takes favicon.svg, it scales everywhere, and it can embed a prefers-color-scheme media query so your icon adapts to dark browser themes (worth its own post).
The Google search angle people forget
Google shows a favicon next to your result on mobile (and increasingly desktop). If your icon declaration is broken or too small, Google shows a generic globe — and search results with a real icon get measurably more clicks than the globe. Google recommends a square image ≥48×48, ideally multiples of 48, reachable at the root. This is one of the few branding fixes that directly affects CTR.
The one source-of-truth rule
Maintain one square master ≥512×512 (1024×1024 ideal) and derive everything from it. Hand-maintained icon folders are where stale sizes and 404s come from — treat favicon files as build output, not design artifacts.
Copy-paste block
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" href="/favicon-32x32.png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">
The 30-second audit
Not sure what your site currently serves? Two moves:
- Check what's declared vs. what resolves — the Favicon Checker reads your live page and reports every icon it finds.
-
Generate the full set from one image — upload one square PNG to favicon.one and get a ZIP with every size above, the
.ico, the SVG, the manifest, and ready-to-paste HTML. Free, no signup, all in-browser.
If you only have a JPG or an odd-size PNG, the PNG → ICO converter handles the legacy part.
Complete reference with per-platform details: Favicon Size Guide: Every Dimension You Need in 2026.
Top comments (0)