Favicon Generator
Turn one logo or image into every favicon size a website needs — including a real favicon.ico — and download them all as a ZIP. Everything happens in your browser and your image is never uploaded anywhere.
Which favicon sizes do you actually need in 2026?
Favicon advice online is full of outdated lists with a dozen sizes. In practice, modern browsers and devices are covered by a short set: a classic favicon.ico (16/32/48 px) for old browsers, bookmarks, and Windows; a 180×180 apple-touch-icon for iPhone and iPad home screens; and 192 and 512 px PNGs for Android and web-app manifests. If you also have an SVG logo, one SVG + the ICO + the 180px icon covers essentially everything.
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16 + 32 + 48 px (multi-size) | Browser tabs, bookmarks, old browsers, Windows |
| apple-touch-icon.png | 180 × 180 | iPhone / iPad "Add to Home Screen" |
| icon-192.png | 192 × 192 | Android home screen, PWA manifest |
| icon-512.png | 512 × 512 | PWA splash screen, app stores |
| favicon-16 / 32 / 48.png | 16–48 px | Optional standalone PNGs for explicit link tags |
How to install the icons
Unzip the download into the root folder of your website (next to your homepage HTML file), then paste these lines inside the <head> of your pages. The same snippet is included in the ZIP as readme.txt.
<link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png"> <link rel="icon" type="image/png" sizes="512x512" href="/icon-512.png">
The icon that matters most is not a favicon at all
The word "favicon" makes people think of the little square in the browser tab, and that is the least valuable icon in the set. It is 16 or 32 pixels, seen at a glance, and almost any legible mark works. The one that gets looked at properly is the 180 × 180 Apple touch icon: when someone adds your site to an iPhone home screen it sits among their apps at full size, next to icons designed by companies with design teams.
Design for that one and let it scale down. Designing for 32 px and scaling up gives you a blurry home-screen icon; designing for 180 px and scaling down gives you a clean tab icon.
Why one square image is not enough
| File | Size | Where it is used |
|---|---|---|
favicon.ico | 32 × 32 | Browser tabs and bookmarks; the format old browsers still ask for first. |
favicon.svg | any | Modern browsers prefer it — one file, sharp at every size, and it can adapt to dark mode. |
apple-touch-icon.png | 180 × 180 | iOS home screen. No transparency: iOS fills it with black, so give it a solid background. |
icon-192.png, icon-512.png | 192 / 512 | Android home screen and the web app manifest. |
Two details cost people an afternoon. iOS ignores transparency and composites the icon onto black, so a logo with transparent corners comes out in a black square. And browsers cache favicons hard — often beyond a normal refresh — so after replacing one, check in a private window before concluding it did not work.
Detail disappears below about 32 pixels
A 16 × 16 icon has 256 pixels in total, which is fewer than the characters in this sentence. Thin strokes vanish, small text turns into a grey smear, and a detailed logo becomes an unidentifiable blob. What survives at that size is a single bold shape or one or two letters with strong contrast against the background — which is why so many recognisable favicons are simply a letter. If your full logo does not reduce well, a cropped fragment of it usually reads better than the whole thing shrunk.
Frequently asked questions
Is my image uploaded to your server?
No. The resizing, the ICO file, and the ZIP are all built inside your browser — your image never leaves your device.
Does it keep transparent backgrounds?
Yes. All generated files are PNGs (the ICO contains PNG data too), so transparency in your source image is preserved. Keep in mind a transparent icon can be hard to see against both light and dark browser themes — a subtle background circle or square often looks better.
Why does favicon.ico still exist?
It's the original favicon format from the 1990s, and it's still the universal fallback: browsers request /favicon.ico automatically even when no link tag mentions it, and bookmarks, RSS readers, and many tools look for it by name. One small ICO file quietly covers all of them.
My image isn't square — what happens?
The tool crops it to a centered square automatically before resizing, so the icon fills the frame with no stretching. If the important part of your logo isn't centered, crop it square yourself first (our crop tool can do it).
What's the ideal source image?
A square PNG or SVG-exported PNG of 512×512 or larger, with a simple, bold shape — fine detail disappears at 16 pixels. Anything smaller than 64px will look blurry when scaled up.
You might also need
✂️Background Remover
AI cutout to a transparent PNG — your photo never leaves your browser.
🖼️Image Compressor
Shrink JPG/PNG/WebP file size with quality and width controls.
🔄Image Converter
HEIC to JPG, WebP to PNG — convert between formats locally.
🕵️EXIF Viewer & Remover
See hidden GPS/camera metadata in photos and strip it out.