Favicon generator
Turn any image into a complete favicon set with a ready-made HTML snippet.
Drop your file here
Processed securely and deleted within the hour.
One image in, the whole set out
A favicon stopped being one 16-pixel file a long time ago. A site that wants to look right in a browser tab, in a bookmark bar, on an Android home screen, on an iOS home screen and in a Windows tile needs a spread of sizes in two different formats, plus a manifest, plus the markup that points at them.
You get ten PNG sizes — 16, 32, 48, 64, 96, 128, 180, 192, 256 and 512 — a multi-size .ico, a site.webmanifest, and an HTML snippet to paste into your <head>. The files are named the way every framework and tutorial expects: apple-touch-icon.png at 180, android-chrome-192x192.png and android-chrome-512x512.png for the manifest, and favicon-32x32.png and friends for the rest.
Why the .ico still matters
It is the one file that needs no markup at all. A browser asks for /favicon.ico at the root of a domain whether you told it to or not, so having one there covers old browsers, feed readers, link previewers and anything that has not read your <head>. The one here contains six sizes inside a single file — 16, 32, 48, 64, 128 and 256 — which is what the format is for and what most generators skip.
Transparency, or a colour behind it
Keep transparency for a logo that should sit on the browser's own tab colour, which is the usual choice and the one that survives a user switching to dark mode. Flatten onto a colour when your mark has thin strokes or fine detail that disappears against a dark tab — a light background behind it stays legible in both themes, at the cost of looking like a sticker.
Start from a square, and start from something simple
Every output is square, so a rectangular image is resized to a square and will look squashed. Crop it first.
The bigger constraint is detail. At 16 pixels you have 256 pixels in total to work with, which is not enough for a wordmark, a tagline or a logo with more than a couple of shapes. What works is a single letter, a single symbol, or the boldest element of a larger logo. Downscaling is done with Lanczos, which is the sharpest of the classical filters, and it still cannot fit a five-letter word into sixteen pixels.
Where the files go
All of them at the root of your site, not in a subfolder — /favicon.ico, /apple-touch-icon.png and so on. iOS in particular looks for the Apple icon at the root by name and will ignore one it cannot find there, and the manifest paths in the file assume the same. Then paste the snippet, and fill in the two empty name fields in the manifest.
If the old one will not go away
Favicons are cached unusually aggressively — a browser will keep showing the previous one long after everything else on the page has updated. A hard reload usually does not clear it. Opening /favicon.ico directly in a tab and reloading that does.
Common questions
What size should my source image be?
At least 512 pixels square, so the largest output is not upscaled. A vector exported at 1024 is ideal.
Do I still need favicon.ico?
Yes. Browsers request it from the root with no markup at all, so it covers everything that has not read your head tag. The one here holds six sizes in a single file.
Should I keep transparency?
Usually yes — it lets the mark sit on the browser tab colour and survives dark mode. Flatten it if your logo has fine strokes that vanish against a dark tab.
Why does my logo look like a smudge at 16 pixels?
Because 16x16 is 256 pixels in total. Use one letter or one symbol rather than a full logo; no amount of resampling fits a word into that space.
Where do the files go?
All at the root of your site, not in a folder. iOS looks for apple-touch-icon.png at the root by name, and the manifest paths assume the same.
My old favicon is still showing.
Favicon caching is unusually stubborn and a hard reload often will not clear it. Open /favicon.ico directly in a tab and reload that page.