Favicon generator
ImagesNo. 24 / 84
Turn an image or a couple of characters into PNG favicons at every size, with a ready-to-paste HTML snippet.
the tiny square that decides whether your tab looks professional.
work surface
Math, not advice — results are indicative.Read the disclaimer.
most-used utilities
A letter mark
Use one character, a bold serif font and a brand-colored background.
A logo crop
Upload a square PNG or JPEG; the generator crops it to a centered square.
A full icon set
Download all sizes, upload them to the root and paste the snippet.
pro tips
Design for 16 px first. If it is unreadable there, it will not get better at 512 px.
A solid background is safer than transparency, especially on dark browser themes.
Keep the same visual mark across all sizes; do not use a detailed logo at one size and a letter at another.
what it does
Choose an image or type one or two characters, and the page draws a set of square PNG favicons: 16, 32, 48, 180, 192 and 512 pixels. You get a preview of each size, a download button per file and an HTML snippet to paste into your head tag.
The sizes are not decoration. The browser tab uses 16 and 32 px, the Apple touch icon uses 180 px, and a web app manifest wants 192 and 512 px. Making one file and letting the browser shrink it is how favicons end up as a blurry smudge.
At 16 px, detail disappears. A bold letter, a simple mark or a solid shape reads better than a photograph. If you are using text, keep it to one or two characters and give it a strong background; the letter needs to survive being smaller than a full stop.
Everything is drawn locally on a canvas. Choose the files, download the PNGs and upload them to your site root, then paste the snippet and adjust the paths if your files live somewhere else. The .ico file is not generated yet.
quick answers
Does this generate a .ico file?
Not yet. PNG favicons work in every modern browser, and the snippet covers the common sizes. The .ico file is planned for a later update.
Where do I put the downloaded files?
Usually in the site root, next to index.html. If you put them in a subfolder, update the href paths in the snippet to match.
Which sizes do I actually need?
At minimum 32×32 for modern tabs and 180×180 for Apple touch icons. Add 192 and 512 if you have a web app manifest.