Favicon Generator
Turn any image or emoji into favicons at every standard size, plus a favicon.ico and the HTML tags to drop straight into your page head.
Draw your master icon at 1536, not 512
Icons get requested at a scattered set of sizes, and downscaling by a whole-number factor is meaningfully better than downscaling by a fractional one: each output pixel can average an exact block of input pixels instead of interpolating between them. At icon sizes, where one pixel is a visible part of the design, that shows up as softness and as thin strokes drifting off the pixel grid.
512 is the usual master size, and it is a poor one. It divides evenly into only 6 of the 12 standard sizes:
| Master size | Divides exactly | Awkward |
|---|---|---|
| 512 | 6 of 12 — 16, 32, 64, 128, 256, 512 | 48, 96, 152, 167, 180, 192 |
| 768 | 8 of 12 — 16, 32, 48, 64, 96, 128, 192, 256 | 152, 167, 180, 512 |
| 1024 | 6 of 12 — 16, 32, 64, 128, 256, 512 | 48, 96, 152, 167, 180, 192 |
| 1536 | 9 of 12 — 16, 32, 48, 64, 96, 128, 192, 256, 512 | 152, 167, 180 |
Searching every source size from 256 to 2048 for the one that divides the most targets exactly
gives 1536, which handles 9 of 12:
16, 32, 48, 64, 96, 128, 192, 256, 512. It picks up 48, 96 and 192 — precisely the three
that 512 fumbles.
The reason is one prime factor. 512 is 29, a pure power of two, so it cannot divide anything with a three in it. 1536 is 29 × 3 — the same reach in powers of two, plus the factor that 48, 96 and 192 all need. And that is not a coincidence with the search result: 1536 is exactly the least common multiple of the practical target set, so the search and the arithmetic are answering the same question and agree.
How far up you need to go
If you do not need the largest icons, you do not need the largest master. It is a tidy ladder, each step exactly double the last:
| Largest icon you need | Smallest master that divides everything | Which is |
|---|---|---|
| 192px | 384px | 27 × 3 |
| 256px | 768px | 28 × 3 |
| 512px | 1536px | 29 × 3 |
One trap worth naming, because it sounds right and is not: 384 does not divide 256, and 768 does not divide 512. "Any multiple of 384" is a tempting rule and it breaks at exactly the sizes you are most likely to need. Only multiples of 1536 divide the whole practical set.
The three sizes nothing sensible divides are 152, 167 and 180 — the iOS touch icons. 167 is prime, so there is no master size that handles it cleanly at all. Those you simply resample and accept, or draw separately if the icon is detailed enough to warrant it. In practice a well-drawn icon at 180 is worth more than a perfectly-scaled one, so this is a good place to stop optimising.
One last thing that matters more than any of the above: a 16-pixel icon is 256 pixels in total, and your logo will not survive being shrunk into it. The sizes that get seen most are the smallest, and they usually need a separate, simplified drawing rather than a scaled one — fewer strokes, no text, one shape. Everything on this page is about making the scaling clean; none of it can rescue a design that has too much in it.
How to use
- Upload an image or pick an emoji.
- Check how it looks at the smallest size.
- Download the set and copy the HTML tags.
- Place the files at your site root.
Frequently asked questions
Which sizes do I actually need?
16 and 32 pixels for browser tabs, 180 for Apple touch icons, and 192 and 512 for Android and web app manifests. A traditional favicon.ico containing 16 and 32 covers older browsers. That set handles essentially everything in practice.
Why does my logo look terrible at 16 pixels?
Because 16 by 16 is 256 pixels in total, which cannot carry detail. Logos with fine lines, gradients or text turn to mush. A favicon usually needs to be a simplified mark — a single letter, a bold shape — rather than a shrunken version of the full logo.
Do I still need favicon.ico?
Less than before, but it costs little. Browsers request it from the site root by default even without a link tag, so having one prevents a stream of 404s in your logs. The ICO format can hold several sizes in one file, which is why it persists.
What about dark mode?
A favicon with dark elements can vanish against a dark browser theme. Modern browsers support supplying an SVG favicon that responds to the colour scheme, which is the cleanest solution. Failing that, a mark with enough contrast against both backgrounds is the safe choice.
Why has my favicon not updated?
Because favicons are cached aggressively, sometimes beyond a normal cache clear. A hard refresh may not do it; adding a query string to the link tag usually forces the update. This catches people out and looks like the file is wrong when it is not.
Can I use an emoji?
Yes, and it is a perfectly reasonable choice for a small site or a prototype. Bear in mind that an emoji rendered to an image is fixed at whatever the rendering platform produced, so it will not match the viewer's own emoji style — which is usually fine.
🔒 This tool runs entirely in your browser. Nothing you enter is uploaded, logged, or stored.