KalmtoolsHow to make a favicon that works everywhere (2026 guide)
A favicon is the small icon that sits in a browser tab, in a bookmark and on a phone home screen. It is a tiny thing that does a lot of quiet work: it tells people which tab is yours when they have twenty open, it makes a bookmark recognisable, and it makes a site feel finished rather than half-built. Get it wrong and the page looks unloved. Get it right and nobody notices, which is exactly the point.
Here is the short, reliable version, the sizes and formats that actually matter in 2026, and the HTML you can paste straight in.
The sizes and formats you actually need
You do not need dozens of files. This small set covers browsers, Windows, Apple devices, Android and installable web apps:
favicon.icoholding 16×16, 32×32 and 48×48, for browser tabs, older browsers and Windows.favicon-32x32.pngandfavicon-16x16.pngfor modern browser tabs.apple-touch-icon.pngat 180×180, for the icon iPhones and iPads use when a site is saved to the home screen.android-chrome-192x192.pngandandroid-chrome-512x512.png, for Android and for installable web apps.- An optional
favicon.svg, which stays crisp at any size on modern browsers.
The HTML to paste in
Drop your icon files in the root of your site, then put these lines inside the <head> of every page:
<link rel="icon" href="/favicon.ico?v=2" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=2">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2">
<link rel="manifest" href="/site.webmanifest">The site.webmanifest file lists the two Android sizes and lets a browser offer to install your site as an app. It is a small JSON file and worth including.
Short on time? The free Kalmtools favicon generator turns text, a logo or an image into the whole set above, plus the exact HTML to paste. It runs in your browser, so your image is never uploaded anywhere.
Why your favicon might not be showing
This is the part that wastes an afternoon. If the icon refuses to appear, work through these in order:
- Caching. Browsers hold on to favicons hard. Do a hard refresh, or open the page in a private window to see the true state.
- The path is wrong. The
hrefin your HTML must match where the file really sits. A leading slash means the site root, so/favicon.icolooks at the top level, not the current folder. - A size is missing. Some places ask for a size you have not provided, then show nothing rather than guess. The set above avoids that.
- It is simply new. A fresh site can take a little while before the tab updates. Give it a moment before assuming it is broken.
A note on quality and contrast
At 16 pixels wide, detail disappears. A favicon that reads well is usually one clear shape with strong contrast against both light and dark tab backgrounds. Thin lines and small text vanish. We build with accessibility first at our studio, and the same habit helps here: if the icon still makes sense in miniature and in greyscale, it will work for far more people.
Frequently asked questions
What sizes should a favicon be?
Cover 16×16 and 32×32 for browser tabs, 180×180 for Apple touch icons, and 192×192 and 512×512 PNGs for Android and installable web apps. A single SVG is a useful extra for sharp icons on modern browsers.
Why is my favicon not showing?
The usual causes are browser caching, a wrong file path, or missing sizes. Do a hard refresh, check the icon sits at the path named in your HTML, and make sure you have provided the common sizes. A new site can also take a little while to update in the tab.
Do I still need an ICO file?
It still helps. A multi-size .ico covers older browsers and Windows, while PNG and SVG icons cover modern browsers and mobile. Providing both is the safe route.
Who makes Kalmtools
Kalmtools is built by Outside of the Fox, a neurodiversity-first design and learning studio in Stockport. We take the confusing, the half-built and the not-yet-existing and turn it into websites, e-learning, accessibility audits and digital products that work. If you have a project that needs that kind of care, come and say hello.
Back to Field notes