How to Make a Favicon for Your Website: The 2026 Guide
A favicon is your site's face in the browser: the little image in a tab, in bookmarks, in history and in search results. You can make one in five minutes, yet the topic is buried under myths and outdated advice. Let's lay it out clearly: which set of files you actually need in 2026, which tags to paste, and how to make sure the icon works on every device.
Why your site needs a favicon
When someone has twenty tabs open, titles shrink to a couple of letters — and the only way they find your site is the icon in the tab. A favicon works like a mini-logo: it makes the brand recognisable in bookmarks, in history, on the "frequent sites" screen and in mobile search results.
It is also about trust. A site with no icon shows up as a blank "sheet of paper," which looks abandoned and careless. A tidy favicon is a tiny detail that signals the project is looked after.
In short
A favicon is not one file but a small set: favicon.ico for compatibility, a couple of PNGs for modern browsers, and a separate icon for iPhone and iPad. Below is how to assemble it correctly.
Which files you need in 2026
People used to spawn twenty icons "just in case." The ecosystem has simplified, and a sensible modern minimum looks like this:
The foundation is favicon.ico. That is the multi-size container: it holds the 16×16, 32×32 and 48×48 versions, and the browser grabs the right one. Even if you declare no tags at all, the browser requests this file from the root. So building a favicon.ico is worth it regardless — we cover how the format works in our "What Is ICO" article.
Making the favicon: step by step
The most reliable path is to draw one large square logo and derive the whole set from it. Do not try to draw straight into 16 pixels: start big.
Prepare the source
A square PNG with a transparent background, at least 512×512. The silhouette must read even when tiny.
Build favicon.ico
Convert the PNG to ICO — the converter packs 16, 32 and 48 into one file.
Export PNG versions
Separately export 32×32, 180×180 and 512×512 for modern browsers and iOS.
Drop in the root and add tags
Upload the files and add the links to <head> (tags below).
A note for designers
At 16×16 you have just 256 pixels. Thin lines and text turn to mush. Keep only the main recognisable element of the logo — a letter, a symbol, a silhouette — and make it high-contrast.
Which tags to add to the HTML
A modern, compact set of tags for the <head> section looks like this. It is enough for the vast majority of sites:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">What each line does. favicon.ico with sizes="any" is the universal base for old and new browsers. The 32×32 PNG is the crisp tab icon. The SVG is an optional vector version that can recolor for dark theme. apple-touch-icon is the picture for the iPhone and iPad home screen (180×180). And the manifest is needed if you want the site to be "installable" on Android as an app.
Common mistakes and how to avoid them
Most favicon trouble comes down to a handful of familiar traps:
- PNG only, no ICO. Many older and corporate browsers still request
/favicon.icofirst. Without it you risk a blank icon — keep the ICO as the foundation. - A non-square image. A rectangular logo gets squashed and distorted. Prepare a strict square and pad the rest with transparency.
- Fine detail in the source. What looks great at 512 px becomes a blob at 16 px. Simplify.
- Forgetting apple-touch-icon. Without it, iPhone makes an ugly screenshot of the page instead of your logo when added to the home screen.
- File not in the root. If
favicon.icosits in a subfolder and is not declared with a tag, the browser will not find it.
The main pain: caching
Favicons are cached especially stubbornly. If you still see the old icon after replacing it, that is almost always the cache, not a bug. Do a hard refresh, check in incognito, and if needed append a version to the link: /favicon.ico?v=2.
How to check it all works
Do not trust a single tab. The minimum check:
- Open
site.com/favicon.icodirectly — the file should download or display. - Look at the tab in a normal window and in incognito (clean cache).
- Add the site to the iPhone and Android home screen — confirm you get the logo, not a screenshot.
- Check bookmarks and history — they use the 32×32 size.
Build favicon.ico in a couple of seconds
Upload a square PNG logo and the FormatZ converter packs the 16, 32 and 48 sizes into one ready favicon.ico. Right in the browser, free, no sign-up.
Need to inspect what is inside someone else's ICO, or pull an image out of it? The reverse converter helps — ICO to PNG. And to choose between ICO, PNG and SVG, see our favicon format comparison.
