Favicon Generator
Make every favicon size from one image, with the .ico and the snippets.
Every size is generated in your browser from one decode of your image. Nothing is uploaded.
A favicon is the small icon in a browser tab, and getting one onto a site involves more files than the name suggests. A tab wants 16 and 32 pixels, Windows wants 48, an iOS home screen wants 180, and a web app manifest wants 192 and 512 so an installed app has an icon at the size the launcher draws.
More about Favicon Generator
This generator takes one image and produces that whole set, plus the `.ico` a browser asks for when it requests `/favicon.ico` without being told otherwise, and the two snippets that wire them up: the `<link>` tags for your `<head>` and a `site.webmanifest`.
Each size is downscaled in halving steps rather than in one jump. That sounds like a detail and is the difference between a legible 16-pixel icon and a smudge: going straight from 512 to 16 asks the browser to average a thirty-by-thirty block of pixels into one, and no implementation does that well. Halving repeatedly means each step averages four pixels into one, which is what image editors do and what it looks like.
Every size is previewed at its actual size, not scaled up to be easier to see. That is deliberate: an icon that reads perfectly at 512 pixels very often turns to mush at 16, and a preview that hides this is worse than no preview. If the mark is illegible in the small squares, it needs simplifying before it ships, and this is where you find that out.
The `.ico` is written here rather than pulled from a library. The format is a small header wrapping the PNG images it contains, fully specified and about sixty lines to produce — less code than the dependency would have been, and one fewer thing to trust.
- Six sizes covering browser tabs, Windows, iOS home screens and app manifests
- A real .ico wrapping the 16, 32 and 48 pixel images
- Halving-step downscaling, so the small sizes stay legible
- Every size previewed at its actual size, not enlarged to flatter it
- Ready-made <link> tags and a site.webmanifest, with your site name filled in
- Transparent background kept, or a colour of your choice flattened behind it
- Warns when the source is too small for the large sizes to be sharp
How to use it
- 1Drop in a square image, ideally 512 pixels or larger.
- 2Enter your site name so the manifest snippet is filled in.
- 3Choose whether to keep transparency or flatten onto a colour.
- 4Press Generate, then check the small previews are still legible.
- 5Download the sizes you need and copy the two snippets.
Questions
Do I still need a .ico file?
Only as a fallback: browsers request `/favicon.ico` when a page declares no icon, so a file there covers that case. Every current browser prefers the PNG links when they are present.
What size should my source image be?
At least 512 pixels square, so the largest output is a downscale rather than an upscale. Anything smaller is enlarged for the big sizes and will look soft.
Why does my logo look like a blur at 16 pixels?
Because 16 pixels is 256 pixels in total and fine detail cannot survive that. Favicons need a simplified mark — one letter, one shape — rather than a shrunken version of a full logo.
Should the background be transparent?
Usually yes for a tab icon, so it sits on whatever colour the browser uses. iOS ignores transparency on home screen icons and composites onto black, so choose a colour if the icon is destined there.
Where do these files go?
In your site's root, so the paths in the snippet resolve. Then paste the link tags into your `<head>` and save the manifest as `site.webmanifest` beside them.