In 2026 you don't need 20 favicon files. You need four: a favicon.ico (32×32) for old browsers, an icon.svg for modern ones, an apple-touch-icon.png (180×180) for iPhones and iPads, and a manifest.webmanifest pointing to two PNGs (192×192 and 512×512) for Android. Drop them in your site's root folder, add four lines to your <head>, and you're done.
That's the whole answer. But why it works — and the small, silent mistakes that quietly break it — is where almost everyone gets stuck. This guide walks through the entire thing: the files, the code, the design rules, the framework quirks, and the fixes for when your favicon stubbornly refuses to show up.
What a favicon actually is
A favicon (short for "favourite icon") is that tiny image sitting next to your page title in a browser tab. But it shows up in far more places than most people realise:
- Browser tabs
- Bookmarks and the bookmarks bar
- Browser history
- The Android home screen
- The iOS home screen
- RSS and feed readers
- Some search engine results
- Link previews in Slack, WhatsApp, Discord and Teams
- Browser autocomplete suggestions in the address bar
It's the smallest piece of branding you'll ever ship, and it punches far above its weight. A tab without a favicon looks broken — visitors get that generic grey globe or blank page icon, and it subconsciously reads as "this site is unfinished." A tab with a crisp, distinct favicon looks like a real product built by people who care.
Why favicons became such a mess
Here's the honest reason favicons feel unnecessarily complicated: over 25 years, every browser and operating system invented its own icon standard, and almost none of them were ever properly retired.
Internet Explorer wanted an .ico. Apple wanted touch icons in about six different sizes. Windows wanted tiles. Android wanted a manifest. Safari wanted a pinned-tab mask icon. Each one was a reasonable idea at the time, and each one left behind a piece of legacy that tutorials still dutifully copy.
That's why if you search for favicon guides, half of them will hand you a zip of 27 files with names like mstile-310x150.png — for a Windows tile that essentially nobody sees anymore — plus a wall of HTML that looks like a config file.
You can safely ignore most of that in 2026. Browsers have consolidated hard over the last few years. Here's what you genuinely need.
The 4-file favicon setup
1. favicon.ico — 32×32
This is your fallback, and it's non-negotiable.
Old browsers, feed readers, link-preview bots, and a surprising number of third-party tools automatically request /favicon.ico from your site's root — without you telling them to, and without reading your HTML at all. So the file needs to physically exist at that exact path.
It also needs to be a real ICO file. Not a PNG that you renamed to .ico.
This is the single most common favicon mistake on the internet, and it's brutal because it fails silently. No console error. No warning. Your icon simply doesn't appear, and you spend an hour convinced your HTML is wrong when the file itself was never valid.
ICO is genuinely a different container format — it can even hold multiple sizes inside one file. Converting properly takes about five seconds with a PNG to ICO converter. Start from a square PNG, convert it, and drop the result in your root folder.
One 32×32 is enough these days. You don't need the old 16×16 + 32×32 + 48×48 multi-size ICO unless you're supporting genuinely ancient browsers.
2. icon.svg — the modern one
Modern browsers happily accept an SVG favicon, and it's the best option available. One file, infinitely sharp, at any size, on any screen density — retina displays, 4K monitors, zoomed-in tabs, whatever. No blur, ever.
There's also a trick almost nobody uses: because it's SVG, your favicon can respond to dark mode. Put a media query inside the SVG file itself:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
path { fill: #111827; }
@media (prefers-color-scheme: dark) {
path { fill: #f9fafb; }
}
</style>
<path d="..."/>
</svg>Now your dark mark shows on light tab strips, and your light mark shows on dark ones. It costs you two extra lines and it makes your site feel considered in a way most competitors won't bother with.
If you're picking those two colour values, a colour palette generator will pull the exact shades straight out of your existing logo, and a HEX to RGB converter helps if your design system stores colours in a different format than your SVG needs.
One caveat: keep the SVG simple. Favicons render at tiny sizes, so complex paths, gradients, filters and embedded fonts are wasted bytes. If your SVG is bloated, a quick pass through a code minifier will strip the editor junk that tools like Figma and Illustrator leave behind.
3. apple-touch-icon.png — 180×180
This is what iOS uses when someone taps "Add to Home Screen." Two rules here, and people break both of them constantly:
Make it 180×180 PNG. iOS scales down cleanly from that, so one size genuinely covers every iPhone and iPad. You do not need the old parade of 57×57, 72×72, 114×114, 152×152 files.
Do NOT use transparency. This one bites everybody. iOS does not respect a transparent background — it fills it with black. So your beautiful transparent logo becomes a black square with your logo floating in it, sitting on the user's home screen next to Instagram and their banking app. Always give this file a solid background colour.
Same rule applies conceptually to padding: iOS applies its own rounded corners, so don't put your mark right at the edges or the corners will clip it.
4. manifest.webmanifest — for Android and PWAs
Android's "add to home screen" reads your web app manifest. It's just a small JSON file:
{
"name": "Your Site Name",
"short_name": "YourSite",
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}Because it's JSON, one stray trailing comma or one smart quote from a word processor will break the entire file — and again, it breaks silently. Android just shrugs and uses a generic icon.
Run it through a JSON formatter before you ship it. If you've ever fought a config file that refuses to parse, our guide on how to fix a JSON parsing error covers the usual suspects — and they're exactly the same suspects here.
The 512×512 icon is the one Android uses for the splash screen, so make it clean. The 192×192 is the home screen icon.
The HTML: four lines in your <head>
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">That's genuinely it.
How browsers actually choose
Here's the part that confuses people: you're giving the browser four options, so which one wins?
Browsers don't get confused — they simply pick the best format they understand and quietly ignore the rest. Roughly:
- Old browsers don't understand SVG favicons, so they fall back to the
.ico. - Chrome, Firefox, Edge and modern Safari prefer the SVG, because it's scalable.
- iOS looks specifically for the
apple-touch-iconwhen saving to the home screen. - Android reads the manifest and pulls the PNGs from there.
- Bots and scrapers often just hit
/favicon.icoblindly, without parsing your HTML at all.
So there's no conflict and no "duplicate icon" problem. Each consumer takes what it needs. This is why the .ico still matters even though it's the oldest format on the list — it's the one that gets fetched by things that never read your <head>.
Designing something that survives at 32 pixels
Your full logo will not work as a favicon. It just won't. At tab size, a wordmark turns into grey mush and a detailed illustration turns into a smudge.
Treat the favicon as a separate design problem, not as "the logo, but smaller."
- Use one letter, one symbol, or one shape. Not your full logo lockup with the tagline.
- Kill the fine detail. Hairline strokes disappear entirely. Thicken everything.
- Use high contrast. Your icon has to survive on a light tab strip and a dark one.
- Add a little padding. Breathing room around the mark reads far better than edge-to-edge.
- Avoid gradients and shadows. They muddy at small sizes and add nothing.
- Test it small, for real. Zoom your design down to 32px and squint at it. If you can't identify it in half a second, neither can your visitor scanning 30 open tabs.
A useful sanity check: shrink it, then look at it from across the room. Whatever's still readable is the design. Everything else is decoration you should cut.
Framework and platform notes
WordPress: Set it under Appearance → Customize → Site Identity → Site Icon. WordPress will generate the sizes for you, but it does not always place a valid favicon.ico at your root — so it's worth adding one manually anyway.
Next.js: Drop favicon.ico, icon.svg, and apple-icon.png into the app/ directory and the framework wires up the <link> tags automatically. This is one of the rare cases where the framework's convention genuinely handles it for you.
React / Vite: Put your files in public/ and reference them from the root in index.html. A very common bug here is referencing ./favicon.ico (relative) instead of /favicon.ico (root) — the relative path breaks on any nested route.
Shopify / Wix / Squarespace: These usually offer a favicon upload in theme settings, but they often accept only a PNG and convert it themselves — with mixed results. If your uploaded icon looks fuzzy, upload a properly-sized square instead of letting the platform crop a rectangle.
Static sites (Astro, Hugo, Jekyll): Root folder, four lines, done. Nothing special.
Real-world use cases
A SaaS product: Your users keep 30 tabs open at once. A distinct, high-contrast favicon is genuinely how they find you again. When the tab strip compresses and titles disappear entirely, the favicon is the only thing left. This is arguably the highest-ROI twenty minutes of design work you'll do all quarter.
An e-commerce store: Your favicon appears in the customer's bookmarks and in their browser history when they come back to complete a purchase. A missing one reads as "not a real shop," and trust is the entire game in checkout.
A blog or publication: Feed readers, link previews and social shares all pull your icon. Pair it with proper social tags — our Open Graph tags guide covers the image side of that, and if your shared links are showing up bare, why your link preview isn't showing an image is the companion fix.
An internal tool or dashboard: Give staging, dev and production different favicon colours. Red for prod, orange for staging, green for local. Your team will stop running destructive commands in the wrong environment. It's a trivially cheap trick with an absurd payoff.
A web app with notifications: You can swap the favicon dynamically with JavaScript to show an unread badge — the way Gmail and Slack do. Change the href on the <link rel="icon"> element and the browser updates the tab immediately.
"I uploaded my favicon but it still shows the old one"
This is the number one favicon complaint on the internet, and it's almost never actually your fault. Browsers cache favicons aggressively — far more stubbornly than they cache normal images, sometimes for weeks.
Work through this in order:
- Hard refresh —
Ctrl + Shift + R, orCmd + Shift + Ron Mac. - Visit the file directly — open
yoursite.com/favicon.icoin the address bar and refresh that page. This forces the browser to re-fetch the file specifically. - Add a version string —
<link rel="icon" href="/favicon.ico?v=2">. The query parameter makes browsers treat it as a brand new file. Bump the number every time you change the icon. - Check in an incognito window. If it appears there, it's purely a cache issue and your actual visitors are seeing it fine.
- Confirm the file returns a 200. Open it directly — if your site serves a custom 404 page that returns a 200 status, you can end up "successfully" loading an HTML error page as your icon, which obviously renders nothing.
- Check the path.
/assets/favicon.icolinked as/favicon.icois a classic. So is a relative path that works on your homepage and breaks on every sub-page. - Clear your CDN cache. Cloudflare and similar services will happily keep serving the old file long after you've replaced it on the server.
Once it's live, a link preview extractor is a quick way to see what the outside world actually pulls from your URL — including whether your icon is being picked up correctly by scrapers and social platforms.
Does a favicon affect SEO?
Not directly. Google doesn't rank you higher for having a nice icon.
But it does show favicons in mobile search results, which means your icon is competing for attention right next to your competitors' in the results list. And indirectly, a missing or broken favicon chips away at the trust signals that do matter — the ones that make someone click your result instead of the one below it, or actually complete a purchase once they land.
Treat it the same way you'd treat a typo in your headline. It won't get you penalised. It'll just quietly cost you.
Common mistakes checklist
- Renaming a
.pngto.icoinstead of properly converting it - Transparent background on the Apple touch icon (hello, black square)
- Using a detailed full logo instead of a simplified mark
- Broken JSON in the manifest file
- Files sitting in
/assets/but linked as if they're at the root - Relative paths that break on nested URLs
- A non-square source image getting awkwardly cropped
- Assuming it's broken when it's actually just cached
Frequently asked questions
What size should a favicon be? Keep a 32×32 favicon.ico for legacy support, a scalable icon.svg for modern browsers, a 180×180 apple-touch-icon.png for iOS, and 192×192 plus 512×512 PNGs for Android via the manifest.
Can I just use a PNG as my favicon? Modern browsers will accept a PNG, but you should still keep a real favicon.ico at your root — many older browsers, bots and third-party tools request that exact file automatically without ever reading your HTML.
Do I still need a .ico file in 2026? Yes, but only one: a single 32×32 favicon.ico. Think of it as your safety net, not your main icon.
Why is my favicon not showing up? Nine times out of ten it's browser caching. Hard refresh, add ?v=2 to the URL, or check in incognito. If it's still missing, verify the file is genuinely at your site root, returns a 200, and is a real ICO file rather than a renamed PNG.
Can a favicon have dark mode? Yes — use an SVG favicon and include a prefers-color-scheme media query inside the SVG file itself.
Does a favicon affect page speed? Barely. These files are tiny. Just don't ship a 500 KB PNG as your touch icon — compress it first.
Can I change my favicon dynamically? Yes. Update the href on the <link rel="icon"> element with JavaScript and the browser swaps it live. That's how apps show unread-message badges in the tab.
The takeaway
Favicons feel complicated because the internet never cleaned up after itself. The reality in 2026 is simple: four files, four lines of HTML, and one square design that survives being shrunk to the size of a grain of rice.
Convert your source image with the PNG to ICO tool, validate your manifest with the JSON formatter, pull your brand colours with the colour palette generator, and check the final result with the link preview extractor.
Twenty minutes of work, and your site stops looking unfinished in every tab it lands in.
