How to use the favicon generator
Drop a square logo onto the page — ideally at least 512 × 512 pixels with a transparent background. The tool generates every favicon size you need, previews them across light and dark browser tabs, and packages them into a single ZIP file. Copy the HTML snippet into your page's <head>, drop the files at your site root, and you're done.
Everything runs in your browser. Your logo never leaves your device.
What's in the package
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16 + 32 + 48 bundled | Legacy browsers, Windows taskbar, bookmarks |
| favicon-16x16.png | 16 × 16 | Browser tabs |
| favicon-32x32.png | 32 × 32 | Browser tabs on HiDPI screens, bookmarks |
| favicon-48x48.png | 48 × 48 | Windows taskbar |
| favicon-96x96.png | 96 × 96 | Google TV, some desktop icons |
| apple-touch-icon.png | 180 × 180 | iOS home screen |
| android-chrome-192x192.png | 192 × 192 | Android home screen |
| android-chrome-512x512.png | 512 × 512 | Android splash screen, PWA install |
| mstile-150x150.png | 150 × 150 | Windows tile (IE11, Edge legacy) |
| manifest.json | — | PWA configuration |
| browserconfig.xml | — | Windows tiles configuration |
| html-snippet.txt | — | Copy-paste into your <head> |
How to install
- Download the ZIP and unzip it
- Upload every file to the root folder of your website (same level as index.html)
- Open the
html-snippet.txtfile and copy its contents into your page's<head> - Hard refresh your browser (Ctrl+Shift+R) to see the new icon
Some browsers cache favicons aggressively. If you don't see the update immediately, clear your browser cache or open the site in an incognito window.
Why so many sizes?
Different platforms read favicons at different resolutions:
- 16×16 — the classic browser tab icon since the 1990s
- 32×32 — used by high-DPI (Retina) screens for crisp tabs
- 48×48 — Windows taskbar
- 180×180 — Apple's recommended size for iOS home screen shortcuts
- 192×192 and 512×512 — required by Android and Progressive Web Apps
Modern browsers pick the best one automatically if you list them all in the <head>.
Why ICO is still needed
The .ico format bundles multiple PNGs at different sizes into one file. Old browsers and Windows shortcuts read it directly, and it's the traditional fallback when no other icon is specified. This tool generates one that bundles 16, 32, and 48-pixel versions together.
Design tips
- Start with a square image. Non-square images get centred with letterboxing or stretched, depending on the settings.
- Keep it simple. At 16×16 pixels, only the boldest shapes are recognisable. Detailed logos turn to mush.
- Use a transparent background if you can. It looks native on any browser theme, light or dark.
- Test at small sizes. The preview panel shows exactly what your icon will look like in a tab — if it isn't readable there, it needs to be simplified.
- Pad generously. Icons that fill the entire square look cramped. 10–15% padding usually looks better.
Common questions
What sizes do I need for a favicon?
At minimum: 16×16 and 32×32 for browser tabs, 180×180 for Apple touch icon, 192×192 and 512×512 for Android and PWAs. The .ico file bundles 16, 32 and 48 together.
Is the favicon generator free?
Yes. It is free, runs entirely in your browser, and you can generate unlimited icons.
Do I need to upload my logo?
No. Drop an image onto the page. It never leaves your device — all processing happens locally.
What image format should I start with?
A square PNG with transparent background works best. Aim for at least 512×512 pixels for crisp results at every size.
Does it support HEIC?
Yes. iPhone HEIC photos are decoded in-browser before generation.
How long until the new favicon shows up?
Once you upload the files and update the HTML, most modern browsers show the new icon within minutes. If yours doesn't, clear the cache or use an incognito window. Search engines re-crawl favicons over days to weeks.
Can I use an SVG favicon?
Yes. Modern browsers support <link rel="icon" type="image/svg+xml" href="favicon.svg"> which scales perfectly at any size. This tool doesn't generate SVG, but you can upload your existing SVG alongside the generated PNGs. The HTML snippet includes an optional SVG line.
Will my favicon look good on dark mode?
The preview panel shows both light and dark tabs. If your icon has a transparent background and is drawn in dark lines, it disappears on dark tabs. Either use a solid background colour, or include a small lighter outline.