Favicon Generator — PNG to Full Favicon Kit

PNG → .ico + PNGs + manifest + HTML · 100% in-browser, no upload

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

no files

Ready.

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.html into your <head>.
Optional: also drop your favicon.svg at 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.