Favicon Generator — PNG to Full Favicon Kit
Drop a square PNG (ideally 512×512 or 1024×1024) and download a complete favicon kit — without your icon ever leaving your browser. It produces everything modern browsers and mobile devices look for: a multi-resolution favicon.ico, eight PNG sizes, an apple-touch-icon.png, a minimal site.webmanifest, and a copy-paste HTML snippet for your <head>.
Drop a square PNG here
512×512 or 1024×1024 recommended
What's in the ZIP
- favicon.ico — multi-resolution (16/32/48/64/128/256), works in legacy browsers and Windows.
- icon-16/32/48/64/128/180/192/256/512.png — individual size PNGs.
- favicon-32.png + apple-touch-icon.png — common references.
- site.webmanifest — minimal PWA manifest pointing at icon-192 / icon-512.
- snippet.html — paste into your
<head>:<link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
How to use the kit
- Drop a square 512×512 or 1024×1024 PNG. Bigger source = sharper small sizes.
- Click Build favicon kit. You'll get one ZIP per input.
- Unpack the ZIP and copy all the files to your site root (alongside
index.html). - Paste the contents of
snippet.htmlinto your<head>. - Optional: also drop your
favicon.svgat the site root — the snippet already references it for modern browsers.
Source-image checklist
- Square. Non-square sources are letterboxed.
- 512+ px. Smaller sources downscale poorly to 256.
- Bold & simple design. The 16-px version is what most users see — fine detail is invisible there.
- Test on light AND dark browser themes. A subtle dark icon disappears on dark Chrome tabs.
- If your source is SVG, rasterise to 1024×1024 via SVG → PNG first.
FAQ
Is my image uploaded anywhere?
No. The whole kit is generated in your browser with JavaScript — the icon never touches a server, so it works offline and is safe for confidential or pre-launch logos. Most online favicon generators upload your file; this one doesn't.
What favicon sizes do I actually need?
16 and 32 px for browser tabs, 180 px for the Apple touch icon, 192 and 512 px for the web manifest (Android & PWA installs), plus a multi-size .ico as the legacy fallback. This kit generates all of them, so you don't have to think about it.
Should I also serve favicon.svg?
Yes if you have a vector source — modern browsers prefer it. Drop the SVG at site root as favicon.svg; the snippet already references it. The kit's PNGs and ICO act as fallbacks for older browsers and OS-level icons.
Why not just one PNG?
Different platforms expect different sizes: iOS reads apple-touch-icon.png at 180, Windows reads .ico, Android reads icon-192.png from the manifest, browser tabs use 16/32. Covering them all takes seconds and avoids "blurry favicon" reports.
Customising the manifest?
The generated site.webmanifest is intentionally minimal. Before shipping, edit name, short_name, theme_color, and background_color to match your brand. Those drive how Android shows the icon when installed as a PWA.
Should I version the favicon URL?
If you change the icon and notice the old one still showing, append a version query string in the snippet: href="/favicon.ico?v=2". Browsers cache favicons aggressively.
Part of: Ship a favicon and app icons
One square master, then every size a browser, a Mac and a phone each insist on separately.
- 1 Square Pad the master to a true square first
- 2 Favicon kit Every PNG size plus the .ico and the web manifest
- 3 PNG to ICO Just the multi-resolution Windows .ico
- 4 PNG to ICNS The macOS .icns bundle
- 5 Transparency checker Check the corners are actually transparent
Part of: Build a starter brand kit from one logo
Everything downstream wants a different shape of the same mark. Make the square master once and derive the rest from it.
- 1 Initials avatar A fallback mark if there is no logo yet
- 2 Solid color Flat brand-colour plates at any size
- 3 OG image The 1200×630 social card
- 4 Watermark The mark, applied over photography
- 5 Favicon kit Every icon size a browser and an OS ask for