Favicon kit

one PNG → .ico + multi-size PNGs + manifest + HTML snippet

Drop a square PNG (ideally 512×512 or 1024×1024) and get a ZIP containing: a multi-resolution favicon.ico, eight PNG sizes, an apple-touch-icon.png, a 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">

Step by step

Prepare a square source — ideally 512×512 or 1024×1024 PNG with the design you want as the favicon. (If you have an SVG, rasterise it via SVG → PNG first.)
Drop it into the drop zone.
Click "Build favicon kit". Each input produces one ZIP.
Unpack the ZIP at your site root, paste the snippet into <head>, and you're done.

FAQ

Should I add favicon.svg too?

Yes if you have a vector source — modern browsers prefer it. Drop the SVG at your site root as favicon.svg alongside this kit's contents; the snippet already references it.

Why not just one PNG?

Different platforms expect different sizes. iOS reads apple-touch-icon at 180; Windows reads .ico; Android reads icon-192. Covering them all takes a few seconds and avoids "blurry favicon on Safari" reports.

Can I customise the manifest?

Yes — the generated site.webmanifest is a minimal starting point. Edit name, theme_color, background_color before shipping.