How to generate a favicon set
- Upload a square (or square-ish) image — a logo mark, an icon, or a simple illustration.
- Check the size previews to confirm the crop and detail hold up at small sizes.
- Click Generate & download .zip.
- Unzip and drop the files into your site's root (or wherever your framework serves static assets), then add the provided
<link>tags to your<head>.
Every resize happens on an HTML5 canvas in your browser — the image is never uploaded.
What's in the download
- favicon.ico — a single file containing 16×16, 32×32, and 48×48 versions, the classic format browsers have looked for since the 1990s and still fall back to.
- favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, favicon-64x64.png — standalone PNGs for browsers and tools that prefer PNG over ICO.
- apple-touch-icon.png (180×180) — what iOS looks for specifically when a user adds your site to their home screen.
- icon-192.png and icon-512.png — the sizes the Web App Manifest spec expects for Android home-screen icons and PWA install prompts.
- how-to-use.html — a plain-text snippet with the exact
<link>tags to paste into your site.
Why one image isn't enough
A favicon isn't rendered once and reused — it's requested fresh, at a specific pixel size, by whatever surface is displaying it. A browser tab wants 16×16 or 32×32. A pinned Windows taskbar icon might request something larger. An iPhone home-screen bookmark specifically requests a 180×180 apple-touch-icon, and if it isn't present, iOS falls back to taking a screenshot of your page — which looks worse than almost any icon would. Serving one image and letting the browser scale it produces soft, blurry results at small sizes; generating each size independently, with its own resize pass, keeps edges crisper.
Designing an icon that survives being shrunk
Most favicon disappointment comes from the source image, not the resizing. A detailed logo with fine text or subtle gradients looks great at 512px and becomes a gray smudge at 16px. A few things that hold up:
- Simple shapes over detailed illustrations. A single bold letterform, a geometric mark, or a simple icon reads clearly at 16px; a multi-element logo usually doesn't.
- High contrast. Favicons sit against light and dark browser chrome depending on the user's theme — strong contrast between the icon and transparent/white background keeps it visible in both.
- No small text. Text below roughly 100px in the source image becomes illegible once scaled to 16–32px. If your logo relies on a wordmark, use just the symbol or initial for the favicon instead.
- Centered, with a little breathing room. The tool crops to a centered square — if your subject sits off-center or too close to the edge in a non-square source image, it may be clipped.
The ICO format, briefly
A .ico file isn't one image — it's a small container holding several images at different sizes, each tagged with its dimensions, so the requesting browser or OS can pick the closest match rather than scaling a single image up or down. Modern ICO files (and this tool's output) embed standard PNG data for each size, which every current browser and OS supports; older BMP-based encoding is no longer necessary.
Privacy: what happens to your image
Your source image never leaves your device — every resize is drawn with the Canvas API, and the final ZIP is assembled locally using JSZip running in your browser tab. Open DevTools → Network while generating and you'll see no upload requests.