Why does my 16px favicon look blurry?

Usually because a large icon was scaled to 16px in the browser rather than being supplied at 16px. This tool writes real 16, 32 and 48px bitmaps into the .ico so the browser does not have to guess. Very detailed artwork will still suffer at 16px — simplify the source if it does.

Why is 512px not inside the .ico?

The ICO width field is one byte, so 256 has to be encoded as zero and anything larger does not fit the format at all. The safe, standard route is to ship 512px as a separate PNG and reference it from the manifest.

Do I still need apple-touch-icon?

Yes if iOS users may add your site to a home screen — that icon is picked up separately from favicon.ico and 180px is the size it wants. It is a PNG, not part of the .ico.

Should my source be square?

It should be roughly square. A non-square source is centre-cropped here, which protects you from distortion but will cut off whatever sits near the edges. Keep the mark centred with breathing room.

Which HTML do I actually need?

The snippet shown covers the common case: favicon.ico for tabs and bookmarks, apple-touch-icon for iOS, and the 512px PNG for Android and PWA install prompts. Add a manifest file if you are building an installable app.

Favicon Generator — Guide

Turn any image into a real multi-size favicon.ico plus apple-touch-icon and 512px PNG — centre-cropped and resized in your browser, nothing uploaded.

What it is and when to use it

One picture in, a working icon set out. The tool centre-crops your image to a square, resamples it down to 16, 32 and 48 pixels, and packs all three into a single favicon.ico using the PNG-in-ICO container that modern browsers expect — so a browser picks the size that fits instead of scaling one bitmap and going blurry. It also emits a 180px apple-touch-icon for iOS home screens and a 512px PNG for Android shortcuts and PWA manifests, plus the three lines of HTML that wire them up. Everything is done with the browser's own image pipeline and a hand-written ICO header, so nothing is uploaded and there is no server queue: useful exactly when the icon belongs to a project that is not public yet. Resampling uses high-quality smoothing, which is the difference between a legible 16px favicon and a smear.

Turn one square-ish image into a real favicon.ico with 16, 32 and 48px sizes inside it, plus an apple-touch-icon and a 512px PNG, all resized in your browser.

How to use it

Pick an image
Choose whether to keep transparency or fill white
Generate, then download the .ico and PNGs and paste the HTML snippet

Things that trip people up

A non-square source is centre-cropped to a square before resizing, so it is never stretched into a distorted icon.
Sizes above 128px are exported as separate PNGs rather than packed into the .ico, because the ICO width field is a single byte.
The .ico embeds PNG payloads (the Vista-and-later form), which every current browser accepts.

Questions people ask

Why does my 16px favicon look blurry?: Usually because a large icon was scaled to 16px in the browser rather than being supplied at 16px. This tool writes real 16, 32 and 48px bitmaps into the .ico so the browser does not have to guess. Very detailed artwork will still suffer at 16px — simplify the source if it does.
Why is 512px not inside the .ico?: The ICO width field is one byte, so 256 has to be encoded as zero and anything larger does not fit the format at all. The safe, standard route is to ship 512px as a separate PNG and reference it from the manifest.
Do I still need apple-touch-icon?: Yes if iOS users may add your site to a home screen — that icon is picked up separately from favicon.ico and 180px is the size it wants. It is a PNG, not part of the .ico.
Should my source be square?: It should be roughly square. A non-square source is centre-cropped here, which protects you from distortion but will cut off whatever sits near the edges. Keep the mark centred with breathing room.
Which HTML do I actually need?: The snippet shown covers the common case: favicon.ico for tabs and bookmarks, apple-touch-icon for iOS, and the 512px PNG for Android and PWA install prompts. Add a manifest file if you are building an installable app.

Next steps

Open the Favicon Generator tool

Spotted something wrong on this page? Tell us via Contact Us