About the Favicon Generator (ICO/PNG) tool
Turn any square-ish image into a complete favicon set: a multi-size favicon.ico plus 16, 32, 48, 180 (Apple touch), 192, and 512px PNGs for web manifests.
Everything runs locally in your browser. Because no file is transmitted, there is no size limit imposed by a server and no record of what you edited.
How to use it
- Add a square image or logo.
- The full set of sizes is generated automatically.
- Download and add them to your site's root.
A favicon is not one file
Modern sites need several: 16×16 and 32×32 for browser tabs, 180×180 for the iOS home screen, and 192×192 and 512×512 for Android and progressive web apps.
Serving one large PNG and letting the browser scale it produces a blurry tab icon, because downscaling to 16 px without hinting destroys fine detail.
Designing for 16 pixels
At 16 × 16 you have almost no room. Detailed logos become unreadable smudges. Successful favicons are usually a single letter, a simple mark, or a bold silhouette.
Test at actual size before committing. Whatever looks good at 512 px frequently disappears at 16.
Common mistakes
- Using a detailed logo that turns into a smudge at 16 px.
- Providing only one size and letting browsers scale it.
- Forgetting the 180 × 180 Apple touch icon, which iOS uses for home-screen bookmarks.
Questions people ask
What sizes do I actually need?
16, 32, 180, 192 and 512 pixels covers browsers, iOS and Android.
Should I use ICO or PNG?
PNG is fine for every current browser. ICO is only needed for very old versions of Internet Explorer.
Why does my favicon look blurry?
Almost always because one large image is being scaled down by the browser rather than a purpose-made 16 or 32 px version being supplied.