What it is
The Favicon Generator takes one image and produces the set of icon sizes a website needs: the small one in the browser tab, the larger ones used when someone saves the site to a phone home screen, and the sizes in between.
It exports at 16, 32, 48, 128, 180, 192 and 512 pixels, which covers desktop browsers, Android and the Apple touch icon.
How to use it
- Add your image, ideally square and at least 512 pixels on each side.
- Download the set.
- Put the files at the root of your site and reference them from the
<head>.
Designing for 16 pixels
This is the part that decides whether the result looks professional or muddy, and it is not about the tool.
A favicon is read at 16 by 16 pixels in a browser tab. At that size a full logo with a wordmark becomes an unreadable smudge. What works is a single strong element: one letter, one symbol, one shape, with high contrast against both a light and a dark tab bar.
Start from something already simple rather than shrinking a detailed logo. If you cannot tell what your icon is at 16 pixels, neither can anyone else.
A note on transparency
Keep the background transparent if your icon should sit on whatever colour the browser uses. Give it a solid background if the shape needs to hold together against an unpredictable backdrop. Both are valid; the wrong one shows up as an icon that disappears in dark mode.
Everything runs in your browser: the image is never uploaded and never stored.
Related: PNG to ICO and the colour palette generator.