Favicon Generator
Turn a logo into a complete favicon pack.
How to use Favicon Generator
Upload your logo — a square image of 512 px or larger works best.
Click Generate favicon pack.
Download the ZIP: favicon.ico, PNGs in every standard size, and snippet.html.
Drop the files at your site root and paste the snippet into your <head>.
A favicon is a 16-pixel design problem
The browser tab renders your icon at 16 × 16 pixels. That is not a small version of your logo — it is a different design, and shrinking a detailed wordmark to that size produces an unreadable grey smudge, which is what most favicons on the web actually are.
Design for the smallest size and let the larger ones follow. One letter, one strong shape, two colours at most, and high contrast against both light and dark tab bars. Test it by looking at the tab from normal viewing distance among a dozen others: if you cannot pick out yours, the design is too detailed.
The sizes that are actually used
Modern browsers and platforms request different files for different contexts, and a complete set is a handful of files rather than a single .ico.
- 16 × 16 and 32 × 32 — browser tabs and bookmarks, bundled in favicon.ico.
- 180 × 180 — apple-touch-icon, used on the iOS home screen.
- 192 × 192 and 512 × 512 — Android and PWA installs, referenced from the web manifest.
- An SVG favicon where you can supply one: sharp at every size and able to respond to dark mode.
Installing it
Put favicon.ico at the site root, where browsers look for it without being told. Reference the rest from the document head with link tags, and list the 192 and 512 icons in your web manifest so an installed PWA has an icon on the home screen.
Favicons are cached aggressively — often more aggressively than any other asset. After changing one, hard-refresh, and expect returning visitors to keep seeing the old icon for a while. Adding a version query string to the URL is the reliable way to force the update.
Generated on your machine
Every step runs inside your browser, using the WebAssembly and Canvas APIs your device already ships with. No file is uploaded, no copy is kept, and nothing sits in a queue on a server waiting to be deleted — which is also why the tool keeps working with the network disconnected.
For a favicon that means your unreleased logo is not sitting on a third party's server before the site it belongs to has launched — which for a rebrand or a stealth product is the whole point.
Frequently Asked Questions
Which sizes are included?
favicon.ico (16/32/48), favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png (180) and Android icons at 192 and 512 px — everything modern browsers and phones ask for.
What if my logo isn't square?
It is center-cropped to a square automatically. For full control, crop it first with the Crop Image tool.
Does the pack keep transparency?
Yes — PNG icons keep alpha transparency, so your icon looks right on any tab color.
What size should a favicon be?
Upload a square image at 512 × 512 or larger and every required size is generated from it: 16 and 32 for tabs, 180 for iOS, 192 and 512 for Android and PWA installs.
Do I still need a favicon.ico file?
Yes. Browsers request /favicon.ico from the site root automatically even when other icons are declared, and some older ones use nothing else. It costs one file to avoid a 404 on every page load.
Why is my new favicon not showing?
Caching, almost always. Favicons are cached harder than other assets. Hard-refresh, try a private window to confirm the new file is live, and add a version query string to the URL to force clients to re-fetch it.
Can I use a transparent background?
Yes, and it usually looks better — the icon then sits naturally on light and dark tab bars alike. Check it against both, since a dark logo on transparency disappears in dark mode.
Should I use a PNG or an SVG favicon?
Supply both. SVG stays sharp at any size and can adapt to dark mode; PNG and ICO cover browsers and contexts that do not accept SVG. Declaring both is the standard modern setup.
Related tools
Looking for something else? Browse all image tools.