About Favicon Generator
Favicon Generator builds a complete favicon set — the tiny icon that shows up in browser tabs, bookmarks, mobile home screens and search results — from either a letter and colour combo or your own uploaded image. You get every size modern browsers and platforms expect, including the multi-resolution .ico for legacy support, plus a ready-to-paste HTML <link> snippet for your site's <head>. All rendering happens in your browser; nothing is uploaded.
- No uploads
- Browser-only
- Works offline
- 100% free
How it works
- 1
Pick your source
Type a letter (or two) with a background colour, or upload a logo image. Square images give the best result.
- 2
Preview at every size
See live previews of the icon at the sizes browsers actually use — 16, 32, 48, 180, 192, 512 — plus the round Android variant.
- 3
Download the ZIP and paste the HTML
Get a ZIP with every PNG/ICO file, plus a snippet of <link rel='icon'> tags ready to drop into your <head>.
The sizes that actually matter — and where each one is used
A favicon isn't one image; it's a small family of them, and shipping the wrong members is why icons end up blurry in a browser tab but crisp on a phone home screen, or vice versa. Each size is consumed by a different surface, and browsers pick whichever declared size best fits the slot they're filling. Generate the whole set once and you stop guessing.
Browser tabs and bookmarks pull the small PNGs (and the legacy ICO). iOS uses a dedicated 180x180 'apple-touch-icon' when someone adds your page to their Home Screen — it ignores your ICO entirely. Android and installable PWAs reach for the 192 and 512 entries declared in the web app manifest. Skip the manifest icons and your 'Add to Home Screen' prompt either won't fire or will fall back to a screenshot of the page.
| Size | Format | Declared via | Where it shows up |
|---|---|---|---|
| 16x16 | PNG / ICO | link rel=icon | Browser tab, address bar, bookmarks bar |
| 32x32 | PNG / ICO | link rel=icon | Hi-DPI tabs, Windows taskbar shortcuts, search results |
| 180x180 | PNG | link rel=apple-touch-icon | iOS / iPadOS Home Screen and Safari pinned tabs |
| 192x192 | PNG | manifest icons | Android Home Screen, app launcher, PWA install |
| 512x512 | PNG | manifest icons | PWA splash screen, app stores, high-res launchers |
| 512 maskable | PNG | manifest icons (purpose maskable) | Android adaptive icons — circle, squircle, teardrop masks |
The maskable icon is a separate file from the plain 512, not a flag on the same one — Android needs a version designed to be cropped.
ICO vs PNG, and the maskable safe zone people forget
The .ico file is a Windows container that can hold several sizes (typically 16 and 32) in one file, and it remains the most reliable fallback for older browsers and for the bare /favicon.ico request a browser makes before it has parsed your HTML. Modern browsers happily take PNGs declared with link tags, and PNG gives you cleaner alpha edges — so the practical answer is 'both': serve an ICO at the root for the automatic request, and PNGs via link tags for everything that reads them.
Maskable is the one most people get wrong. Android's adaptive-icon system crops your icon into whatever shape the launcher uses — a circle on one phone, a squircle on another. If your logo fills the full square, the corners (and sometimes the edges) get sliced off. The fix is to keep all critical content inside a centred safe zone of roughly the inner 80% — about a 40% radius from centre — and let the background bleed to the edges. The maskable icon spec on web.dev and the documentation for the link element on MDN cover the declarations in full.
Why favicons look bad — design for 16px, not for your logo
- Shrinking a detailed logo: a wordmark or a complex illustration turns to mud at 16x16. Use a single letter, a monogram, or the one most recognisable glyph of your mark — detail you can't read at 16px is noise.
- No contrast against the tab: browser tabs sit on light or dark chrome you don't control. A thin dark icon vanishes in dark mode. Give the icon its own solid or high-contrast background so it reads on any tab colour.
- Thin strokes and tiny gaps: lines under ~2px and the holes in letters like 'a' or 'e' collapse when downscaled. Thicken strokes and simplify shapes specifically for the small sizes.
- Forgetting iOS has no transparency on Home Screen: apple-touch-icon backgrounds get a solid fill, so a transparent PNG can render on an unexpected colour. Design the 180px tile with the background you actually want.
- After exporting, fine-tune the source artwork's dimensions or padding with Resize Image or Crop Image before regenerating the set.
Frequently asked questions about Favicon Generator
Which favicon sizes do I actually need?
At minimum: favicon.ico (16/32 multi-res, for legacy browsers), apple-touch-icon-180.png (iOS home-screen), and a 192/512 pair (Android home-screen and PWA install). The generator produces all of them plus a Web App Manifest snippet so you don't have to remember which size goes where.
What's the difference between .ico and .png?
The .ico format is a Windows-era container that can hold multiple sizes (16, 32, 48) in one file — it's what older browsers and Windows Explorer expect. Modern browsers and mobile platforms use PNGs at specific resolutions. The generator produces both because you genuinely need both.
Can I use an image with transparency?
Yes — PNGs with alpha channels are preserved. For best results across platforms, give your design some breathing room around the edges; iOS in particular adds a rounded-corner mask, so anything close to the corners will be clipped.
Privacy, offline use, browser support, and pricing questions are answered on the site-wide FAQ.