Processed entirely on your device — nothing is uploaded
How to use the favicon generator
- 1Drop a square image into the box above — 512 × 512 or larger works best.
- 2Choose whether to keep transparency or composite onto a solid colour.
- 3Press Generate favicon pack.
- 4Download the ZIP, unpack it into your site root, and paste the HTML snippet into your head.
Why one PNG is not enough
A favicon is displayed at wildly different sizes depending on context: 16 pixels in a browser tab, 32 in a bookmark bar, 180 when saved to an iOS home screen, 192 and 512 for an Android progressive web app, and larger again in some desktop shortcut views.
Supplying a single large PNG and letting the browser scale it produces a blurry tab icon, because downscaling a detailed logo to 16 pixels loses everything that made it legible. Supplying a single small PNG produces a soft home-screen icon. The only good answer is a set of images rendered individually at each size.
This generator produces all of them from your source in one pass, plus a real .ico file containing the 16, 32 and 48 pixel versions in a single container — which is still what a bare favicon.ico request expects.
What the .ico file actually is
ICO is an old Windows container format, and it is genuinely a container: a small header, one directory entry per image, then the image payloads. Since Windows Vista those payloads may simply be PNG data, which is what every modern browser expects and what this tool writes.
That is why a real .ico is not the same thing as a PNG renamed to .ico. A renamed file has no directory structure, so a browser asking for the 32-pixel entry cannot find one. Some browsers cope; others show nothing.
The .ico here holds three sizes, so the browser picks whichever fits the context rather than scaling one image to fit all of them.
Designing something that survives 16 pixels
A favicon has roughly 256 pixels to work with in a browser tab. That is not enough for a wordmark, a tagline, or fine linework — all of it turns to mush.
What works is a single strong shape: one letter, a simple mark, a distinctive silhouette. High contrast between the shape and its background matters more than colour accuracy. Test by shrinking your logo to 16 pixels and looking at it from normal viewing distance; if you cannot tell what it is, neither can anyone else.
Non-square sources are centre-cropped to a square here, since every favicon slot is square. If your logo is a wide wordmark, crop it to the symbol or initial yourself before uploading — an automatic centre crop of a wordmark usually captures the middle two letters.
Transparency and dark mode
A transparent favicon adapts to whatever the browser puts behind it, which sounds ideal and often is. The failure case is a dark logo on transparency viewed in a dark-themed browser, where the icon effectively disappears.
If your mark is dark and you cannot be sure of the backdrop, compositing onto white here gives you a small opaque tile that stays visible everywhere. It is less elegant than transparency and considerably more reliable.
The generated manifest includes theme and background colours set to white; if your site has a distinct brand colour, edit those two values in site.webmanifest before deploying — it controls the splash screen colour when someone installs your site as an app.
Frequently asked questions
What size should my source image be?
Square and at least 512 × 512. Larger is fine; the generator renders each output size from your original rather than from an intermediate.
Is a renamed PNG the same as an .ico?
No. ICO is a container with a directory of multiple images. This tool writes a genuine multi-resolution .ico.
Where do the files go?
Unpack them into your site's root directory, so they are served from /favicon.ico, /icon-192.png and so on, then paste the HTML snippet into your <head>.
Should I keep transparency?
Usually yes, unless your mark is dark — a dark transparent icon can vanish against a dark browser theme. Compositing onto white is the safe option there.
My logo is a wide wordmark. What happens?
It is centre-cropped to a square, which rarely flatters a wordmark. Crop to the symbol or an initial yourself first.
Is my image uploaded?
No. Rendering and ZIP assembly both happen in your browser.