Favicons: which sizes you actually need
How many files to generate, which tags belong in your HTML, and why your favicon still isn't showing up even though you uploaded it.
A complete favicon set needs just five files: a classic favicon.ico at the root, a 32px PNG, a 180px icon for the iOS home screen, two PNGs (192px and 512px) for the Android/PWA manifest, and an optional SVG that scales without generating extra sizes at all. Not the twenty-file checklists still floating around old tutorials. You can generate the whole setin one step with Docuboxer's favicon tool, which processes the image entirely in your browser instead of uploading it anywhere.
The actual minimum set
Of the dozen-plus sizes older guides list, here's what a modern site actually ships:
- favicon.ico (root, 16–48px): the one file browsers and bookmark managers still request by path convention, whether or not your HTML declares it. It has to live at
/favicon.ico, not in a subfolder. - icon-32.png: what most modern browsers pull for the tab bar when no SVG is available.
- apple-touch-icon.png (180×180): the icon Safari on iOS shows when someone adds your site to their home screen. Skip transparency here — iOS composites it onto a solid background, and transparent areas look wrong.
- icon-192.png and icon-512.png: referenced from
manifest.json, used by Android for the PWA install icon and by the splash screen while the app boots. - icon.svg (optional): one vector file that covers any pixel density in browsers that support it, with the PNGs as fallback everywhere else.
The <link> tags that belong in your <head>
Generating the files is half the job; declaring them is the other half:
<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.json">
Order barely matters, but having all four does. Skip the apple-touch-icon and iOS falls back to a cropped screenshot of your own page as the shortcut icon — rarely a good look.
What manifest.json is actually for
manifest.json is the file that tells Android — and any PWA-capable browser — which icon to show when your site gets installed as an app. It needs an icons array with at least the 192px and 512px entries, each with its own src, sizes, and type. The 512px version doubles as the splash screen while the PWA boots, so it's worth using a clean render of the logo rather than an upscaled crop of the 192px file.
Why a single .ico file can hold multiple sizes
Unlike a PNG, the ICO format is a container: one favicon.ico file can bundle several resolutions — 16×16, 32×32, 48×48 — and the OS or browser picks whichever fits the context. It's a holdover from 1990s Windows, but it's exactly why a single .ico still looks sharp both in a cramped tab and in a larger desktop shortcut.
Designing for 16px, the size that actually matters
Your full brand mark — wordmark, gradients, multiple elements — almost never survives at 16px, which is the actual size most people see your favicon at, most of the time. The practical rule: reduce the design to a single, high-contrast shape with no text at all. If your logo includes a wordmark, keep only the symbol. Check the design at real tab size before generating the rest of the set — a favicon that only looks right blown up to 512px is failing at the one size that counts. Starting from an SVG logo? Convert it to a high-resolution PNG first so you can crop and simplify before shrinking it down.
Favicons in dark mode
Here's a problem that comes up constantly and almost never makes the checklists: a dark icon on a transparent background effectively vanishes once the browser switches to dark mode, because the tab itself goes dark too. The quick fix is a fill or outline that reads on both light and dark backgrounds. The thorough fix is declaring two separate icon <link> tags using a media="(prefers-color-scheme: dark)" attribute — though browser support for picking the right one is still inconsistent.
Why it's not showing up even though you uploaded it
This is the single most-searched problem around favicons, and it's almost never the image file itself:
- Browser caching: favicons are among the most aggressively cached assets in Chrome and Firefox — sometimes for weeks, regardless of the cache headers your server actually sends. Testing in a private/incognito window or clearing that one site's history is the fastest way to confirm it's just caching.
- Wrong path: the file needs to be exactly where your
<link>tag (or the/favicon.icoconvention) expects it. A different subfolder, or a deploy that never copied the file to the site root, is the second most common cause. - Misconfigured MIME type: some hosts serve
.icoastext/plainorapplication/octet-streaminstead ofimage/x-icon, and browsers silently drop it. - CDN serving a stale copy: if a CDN sits in front of your site, it can keep serving the old favicon long after the origin has the new one. Most providers need that path purged manually.
- How to force a real refresh: append a version query string to the icon URL (
/favicon.ico?v=2), check the Network tab in devtools to see exactly what the server is returning, and update that reference every time the file changes.
Generate the whole set in a minute
Starting from a large PNG export or a screenshot? Resize it into a clean square before generating the favicon — a crooked crop is far more obvious at 16px than it is at full size. And if you need colors that hold up in both light and dark tab bars, the color palette extractor pulls the dominant tones from your logo before you simplify the design.
Frequently asked questions
What favicon sizes do I actually need in 2026?
Five files cover every modern browser and device: a favicon.ico at the site root, a 32px PNG, a 180px apple-touch-icon for iOS, and 192px plus 512px PNGs referenced from manifest.json for Android and PWA installs. An optional SVG handles high-density screens without generating extra sizes.
Why isn't my favicon showing up even though I uploaded it?
The most common cause is browser caching — favicons are among the most aggressively cached assets in Chrome and Firefox, sometimes for weeks. Other frequent causes are a wrong file path, a misconfigured MIME type on the server, or a CDN still serving the old file after you replaced it at the origin.
Do I still need a favicon.ico file in the root?
Yes. Many browsers and bookmark managers request /favicon.ico directly regardless of what your HTML declares. It's the one piece of the set that still works by path convention rather than by explicit link tag, which is exactly why it trips people up when it's missing.
What's the difference between the apple-touch-icon and the manifest.json icons?
The 180px apple-touch-icon is what Safari on iOS uses when someone adds your site to their home screen. The 192px and 512px icons in manifest.json are what Android and any PWA-capable browser use for the install icon and the splash screen while the app loads.
How do I design a favicon that still reads at 16px?
Strip your logo down to one simple, high-contrast shape with no text — at 16px, fine detail, gradients, and small type all collapse into a blur. Check the design at its actual tab size before generating the rest of the set; a favicon that only looks good on a 512px canvas fails at the one size most people actually see.
Does my favicon need a separate version for dark mode?
If your icon is a dark shape on a transparent background, yes — it effectively disappears once the browser's tab bar switches to dark mode. The quick fix is an outline or fill that holds up on both light and dark backgrounds; the thorough fix is declaring two icon link tags with a prefers-color-scheme media query, though browser support for that technique still varies.
Generate your full favicon set now
Every size, the manifest.json, and the link tags ready to paste. Free and 100% local.
Open Favicon generator →Related tools
- Generate favicon — Every size and the manifest.json in one step.
- Convert SVG — Turn a vector logo into a high-resolution PNG.
- Resize image — Crop and square it up before generating the set.
- Extract color palette — Pull the dominant tones from your brand.
You might also like: free SEO tools that respect your privacy and 13 privacy-first developer tools.