What files does the favicon kit include?

A multi-size favicon.ico (16/32/48), standalone PNG favicons at every size you select (16 to 512px), an apple-touch-icon.png, a site.webmanifest with your name and theme colour, a head-snippet.html and a README. They are bundled into one zip.

Why do I still need a favicon.ico if PNGs work?

Modern browsers happily use PNG icons, but a root /favicon.ico remains the universal fallback that legacy browsers, feed readers and bookmarking tools request by default. Shipping both covers every client.

What size image should I upload?

A square image at least 512px on each side is ideal. The tool cover-crops and downscales with high-quality smoothing, so a large square source stays crisp at 16px and at 512px alike. Non-square images are centre-cropped.

What is the apple-touch-icon safe area for?

iOS adds its own rounded mask and can clip artwork near the edges. The safe-area slider adds transparent-free padding around your icon and fills the background colour, so nothing important gets cut off on the home screen.

Is my image uploaded anywhere?

No. The image is decoded and all icons are rendered entirely with the browser canvas, and the zip is built locally with JSZip. Nothing leaves your device and there is no server round-trip.

Where do I put the generated files?

Copy every file from the zip to your site's web root — the same folder that serves /favicon.ico — then paste the head snippet into the of your pages. If your icons live in a sub-folder, adjust the paths in the link tags accordingly.

Favicon Kit Generator

A Favicon Kit Generator that turns a single image into the complete set of icon assets a real website needs — not just one PNG. Upload a square logo and the tool produces a multi-size favicon.ico, standalone PNG favicons from 16px up to 512px, an apple-touch-icon.png for iOS home screens, a valid site.webmanifest, and the exact link/meta markup to paste into your page head. Everything is bundled into one downloadable zip so you can drop it straight into your site root. It is built for developers, designers and anyone shipping a site who is tired of stitching favicon formats together by hand or pasting their logo into an unknown online uploader.

The whole pipeline runs in your browser. Your image is decoded with the canvas API, each icon is rendered locally, and the zip is assembled with JSZip — there is no upload, no account and no server. Settings such as your chosen sizes, rounding, manifest name and theme colour auto-save in this browser, so the next time you open the tool your defaults are already there.

How it works

When you upload an image, the tool reads it as a data URL and decodes it into an off-screen image. For every size you select it creates a square canvas, cover-crops the source so the canvas is always filled (centring the image and scaling by the larger of the two ratios), applies optional rounded-corner or circular clipping, and exports a PNG with high-quality smoothing. The favicon.ico is written by hand: a 6-byte ICO header, one 16-byte directory entry per embedded image, and the PNG bytes for the 16, 32 and 48px renders — a format modern browsers and Windows both accept. The apple-touch-icon is rendered opaque (iOS does not support transparency on home-screen icons) with an optional safe-area margin and background fill. Finally the site.webmanifest is generated from your name, short name, theme colour and background, including a 512x512 maskable icon entry, and the matching HTML snippet is produced for the page head.

Example

Suppose you have a 512x512 brand logo. Upload it, keep the default sizes (16, 32, 48, 96, 192, 512), set corner rounding to about 20% for a soft-edged look, choose the 180px apple-touch-icon, and enter your app name plus a dark theme colour. Click Generate and you immediately see every icon previewed at actual size against a transparency checkerboard. Hit Download .zip and you get a favicon-kit.zip containing favicon.ico, six PNGs, apple-touch-icon.png, site.webmanifest, head-snippet.html and a README. Copy those to your web root and paste the snippet — your site now has correct favicons across desktop browsers, Android home screens and iOS.

Every byte is produced locally, so the same kit you download is exactly what was built in your browser — nothing is uploaded or stored on any server.