Favicons, Fully Explained: Every File and Fix You Need
A favicon looks like one small icon, but it's actually a set of different files that different systems each ask for on their own terms — a browser tab, an iPhone home screen, an Android launcher, and Google's own search results all check somewhere slightly different. Here's the whole picture, and why the icon you set months ago sometimes still won't go away.
Why one image isn't enough
The word "favicon" comes from Internet Explorer 5 shipping a feature that read one file, favicon.ico, from the root of a site. That single-file era is long over. A modern site is expected to hand out a small icon (browser tab, bookmarks), a mid-size icon (iOS and Android home screens), and a large icon (Android splash screens and app-install prompts) — and each of those has its own filename convention, its own size, and in one case its own rules about transparency. Skip one and the result isn't an error message; it's a blank grey square, or an old icon that quietly outlives the site redesign it belonged to.
The files that actually matter in 2026
Favicon tutorials from a decade ago list a dozen-plus files for phone models and browser versions that no longer exist. In practice, current browsers and devices are covered by a short set:
| File | Size | Who reads it |
|---|---|---|
favicon.ico | 16, 32, 48 px (one file, multiple sizes inside) | Browser tabs and bookmarks — still the first thing older browsers and some crawlers look for |
favicon.svg | Vector, any size | Chrome, Firefox, and Edge prefer it when offered — sharp at any zoom level, and it can switch appearance for dark mode via CSS |
apple-touch-icon.png | 180 × 180 | iPhone and iPad, when someone adds your site to the home screen |
icon-192.png | 192 × 192 | Android home screen icon |
icon-512.png | 512 × 512 | Android splash screen and the "install this site as an app" prompt |
If your logo is already a clean vector, one SVG plus the ICO fallback and the 180 px Apple icon covers almost everyone. Raster-only logos need the full set above generated from one square source image — that's exactly what CalcPerch's Favicon Generator does: drop in one image and it outputs every size, including a real multi-resolution favicon.ico, as a ZIP you unzip straight into your site's root folder.
Wiring it up in the <head>
Files sitting in the root folder do nothing on their own — a page has to declare them. A working, current set of tags looks like this:
<link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png"> <link rel="icon" type="image/png" sizes="512x512" href="/icon-512.png">
Order matters a little: browsers that understand SVG favicons generally prefer the first matching rel="icon" tag they support, so listing the SVG first lets modern browsers use it while everything else falls back to the ICO. If your site is a Progressive Web App, the 192 and 512 px icons are usually also declared inside a site.webmanifest JSON file rather than (or in addition to) head tags — the manifest is what Android and Chrome's install prompt actually reads.
Why your favicon isn't showing up
Almost every "my favicon won't change" report traces back to one of these, roughly in order of likelihood:
- Aggressive caching. Browsers cache favicons far more stubbornly than regular pages, sometimes for weeks, independent of a normal refresh. Open the site in a private/incognito window before concluding the new file didn't take — that's the fastest way to rule caching out.
- Wrong path or case.
/Favicon.icoand/favicon.icoare different files on a server that treats paths as case-sensitive. Check the exact request in your browser's network tab if you're unsure what's actually being fetched. - It's not actually in the root. A favicon referenced with a relative path from a subfolder page can resolve to the wrong location. Absolute paths starting with
/avoid this entirely. - A CDN or proxy is serving a stale cached copy of the old file, separate from the browser's own cache — worth a hard purge if you're on Cloudflare or similar.
- Transparency on iOS. iOS ignores alpha transparency on the Apple touch icon and fills it with solid black, so a logo designed on a transparent background can come out as a black square on an iPhone home screen specifically, while looking fine everywhere else.
Favicons show up in Google Search too
Since 2019, Google Search has shown a small favicon next to search results on both desktop and mobile. Google's own documentation gives the actual bar: the image must be square, at least 8×8 pixels, in a standard image format, declared with a <link rel="icon"> tag on the homepage, and reachable when Google crawls it (not blocked by robots.txt). Google explicitly recommends going well past the 8 px minimum — something larger than 48×48 — so the icon still reads clearly at the small size search results actually display it. None of this is guaranteed to show, and Google notes the favicon URL should stay stable rather than changing often, since it has to be re-crawled to update.
Designing one that survives shrinking to 16 pixels
A 16×16 favicon has 256 total pixels — fewer than the number of characters in this sentence. Thin strokes disappear, small text turns into a grey smudge, and a detailed logo collapses into an unrecognizable blob. What actually survives that size is a single bold shape, strong contrast against the background, and at most one or two letters. If your full logo doesn't reduce well, a cropped fragment — an initial, a mark, a simplified icon — usually reads better at 16 px than the whole logo shrunk down. Design for the large size (the 180 px Apple icon) and let it scale down cleanly; designing for 16 px and scaling up produces a blurry home-screen icon instead.
If your source logo has a busy or non-transparent background you want gone before generating icons, CalcPerch's Background Remover produces a clean transparent PNG in the browser first. If the source file is a photo format like HEIC or a JPEG screenshot rather than a proper logo export, run it through the Image Converter to get a clean PNG to work from.
Frequently asked questions
Do I still need favicon.ico if I already have an SVG favicon?
Yes. SVG favicon support is limited to Chrome, Firefox, and Edge — Safari and many older or embedded browsers still fall back to favicon.ico, so it stays the one file that's genuinely universal. Ship both.
Why does my old favicon still show up after I uploaded a new one?
Almost always browser caching, not a broken upload. Check in a private/incognito window first. If it's still wrong there, check for a CDN or proxy cache in front of the site, and confirm the file at the exact URL your <link> tag points to is actually the new one.
Can I just use a photo as a favicon?
Technically yes, but it rarely reads well — photos rely on detail and gradients that vanish at 16–32 px. A simplified mark, a letter, or a high-contrast cropped fragment of a logo almost always outperforms a shrunk photo. Test any candidate at actual size before committing to it.