A Favicon Set That Works Everywhere in 2026
Six sizes, one .ico, one manifest — everything you actually need to ship a favicon that looks right on every browser, iOS home screen, and Windows taskbar in 2026.
Favicons look trivial. Ship one and a hundred edge cases show up: the iOS home-screen icon is fuzzy, the Android chrome tab is the wrong color, Windows pins show a blurry 16×16. This guide cuts through the noise and covers exactly what you need in 2026 — no more, no less.
The Minimum Viable Set
Six assets cover every surface that will show your site's icon:
favicon.ico— multi-size container with 16×16, 32×32, 48×48 inside (legacy browsers, Windows Explorer, pinned tabs).favicon-16x16.png,favicon-32x32.png— modern browser tabs.apple-touch-icon.png(180×180) — iOS home screen, Safari reading list.android-chrome-192x192.png,android-chrome-512x512.png— Android home screen, PWA install prompts.site.webmanifest— the PWA config that points to the Android icons and defines the theme color.
That is it. Everything else (Safari pinned tab SVG, old Apple touch variants, Windows tile images) is legacy. Modern browsers fall back gracefully to the 192 or 512 PNG.
Why .ico Still Ships in 2026
A .ico file is a binary container that can hold multiple PNG images at different sizes. When a browser asks for /favicon.ico (which some still do by default), it gets all three sizes in one request. The renderer picks the one that fits best for the current surface — a 48×48 for Windows Explorer, a 16×16 for a browser tab.
A PNG renamed to .ico only contains one size. It mostly works because browsers are forgiving, but Windows Explorer and some email clients will either render it blurry or refuse to display it. Ship a real .ico if you want consistency.
What site.webmanifest Does
When a user adds your site to their Android home screen or installs it as a PWA, the browser reads site.webmanifest to know how the installed app should look. It defines:
name/short_name— the label under the icon.icons— which PNGs to use at which size.theme_color— color of the status bar when the app is open.background_color— splash screen background during launch.display— usuallystandaloneso the app opens without browser chrome.
Without a manifest, Android falls back to the apple-touch-icon and shows your site inside a browser window. With one, it looks like a native app.
The HTML Snippet
Every file goes in your web root. Every site needs this block in <head>:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#YOUR_HEX">Designing for 16×16
Your beautiful detailed logo dies at 16 pixels. The rules for making a favicon that reads clearly at that size:
- One shape. A circle, a square, or a strong monogram. Avoid compound forms.
- High contrast. The foreground and background must be at least WCAG AA separated. Subtle gradients disappear.
- Safe margin. Leave 10–20% padding. Browsers often add a 1px border of their own.
- Text? A single bold letter works better than a full word at 16px.
The aukimi Favicon Generator produces all six files and the HTML snippet from one image or a letter in under 30 seconds. It generates a real multi-size .ico (per the Microsoft ICONDIR spec), not a renamed PNG. Upload, pick your sizes, download a zip-less bundle, paste the snippet — done.
Common Mistakes
- Serving
.icofrom CDN without cache headers. Browsers cache favicons aggressively. Use a versioned URL (?v=2) to force a refresh after a redesign. - Different icons per subdomain. A single
favicon.icoat the apex is usually what users expect — don't fragment your identity. - Forgetting the
theme-colormeta. Mobile Chrome tints the browser chrome to match this value. Skipping it leaves you with the default gray.
A good favicon is boring in the best way — users notice when it is missing or wrong, never when it is right. Get the six files shipped and move on.
Enjoyed this article?
Related Articles
The Creative Stack Just Collapsed: One Week of AI Tooling, Late April 2026
Between April 27 and May 4, 2026, Adobe, Luma, Novi, fal, Figma, Canva, HeyGen and Anthropic all crossed the same threshold in eight days. Here is what shipped, what it means, and where it leaves the browser-based creative suites trying to consolidate it all.
AI Music and SFX in 2026: What Actually Works in Indie Game Audio
Three years ago, indie game audio meant either licensing royalty-free libraries (cheap, generic, every game sounds the same) or hiring a composer (great, expensive). In 2026, AI generates score that ships. Here is which tools deliver — and where a human composer still wins.
AI Mesh Generation in 2026: What Actually Ships in Game Pipelines
Image-to-3D went from "uncanny demo" to "shipping in indie projects" in eighteen months. Here is what Tripo, Meshy, Rodin, and Hyper3D actually do in production — and where the 3D artist still beats the model every time.