Favicon Generator
Create multi-size favicons and apple-touch-icons from any image.
Favicon Generator builds a complete icon set from one source image — "Create multi-size favicons and apple-touch-icons from any image." Choose a Mode ("Crop to Square", "Pad with Background", or "Transparent"), toggle from ten sizes (16×16 up to 512×512, plus Apple 180×180 and Android 192/512), and click "Generate Favicons" to render every selected size on canvas.
From the results you can download individual PNGs, a classic favicon.ico, or everything at once with "Download ZIP (All)" — the archive (favicon-package.zip) also carries a site.webmanifest for PWA icons. Packaging uses JSZip client-side; defaults are pad mode, #ffffff background, and all sizes selected. No server is involved.
How it works
generateFavicon draws each selected size to its own canvas using source-rect math for crop (center square), pad (background fill + fitted image), or transparent (alpha left empty). Redux faviconSlice tracks mode, background, and the size selection.
The ICO is assembled with a manual header and directory from the favicon-category PNGs (16–512 non-Apple/Android entries only). site.webmanifest is written as JSON with purpose any/maskable entries. A dynamic JSZip import zips icon-*.png, favicon.ico, and site.webmanifest into favicon-package.zip; toasts confirm "Favicon generated successfully!" and "ZIP downloaded!".
How to use
- Drop a square-friendly source image ("Could not read image dimensions" appears for undecodable files).
- Choose Mode: "Crop to Square", "Pad with Background", or "Transparent".
- If pad mode is active, pick the "Background Color" (default #ffffff).
- Toggle "Sizes to Generate ({n})" chips — options include 16, 32, 48, 64, 128, 256, 512, Apple 180, Android 192, and Android 512.
- Click "Generate Favicons" (label becomes "Generating...").
- Preview each size with its file size; download individual "PNG" buttons, "Download ICO", or "Download ZIP (All)".
- Click "Start Over" for a new source image.
Tips
- Pad with Background suits logos that must sit on light/dark bars; Transparent keeps alpha for modern sites.
- The ICO packages only favicon-category sizes (16–512, excluding Apple/Android chips).
- The ZIP also includes site.webmanifest for PWA icons (purpose any and maskable).
- Defaults select every size — deselect what you do not need for a smaller package.
- Generate once, then cherry-pick single "PNG" buttons when you only need one dimension.
Favicon Generator FAQ
What does the ZIP contain?
All selected PNGs, favicon.ico, and site.webmanifest, packed as favicon-package.zip.
Does the ICO include Apple/Android sizes?
No — generateICO embeds only the favicon-category PNGs (16–512 non-Apple/Android sizes).
Which modes change layout?
Crop center-crops to a square, Pad fills the background color around the fitted image, and Transparent leaves the corners as alpha.
Is this done on a server?
No — canvas resizing plus client-side ZIP creation with JSZip.
Can I download just one size?
Yes — each size card has its own "PNG" download button.
Credits
- JSZip — Client-side ZIP packaging of icons + ICO + manifest
- Canvas 2D API — Per-size canvas rendering for crop/pad/transparent modes