Favicon Generator
One image in: favicon.ico, every PNG size, the Apple touch icon, a web manifest and the HTML snippet - as a ZIP.
The annoying part of shipping site icons is never the drawing - it is the pile of sizes: 16 and 32 for browser tabs, 48 for shortcuts, 180 for the iOS home screen, 192 and 512 for PWA installs. This tool produces the whole set at once: drop in an image and get favicon.ico, all the PNGs, site.webmanifest and an HTML snippet ready to paste, bundled into a single ZIP.
Everything is generated in the browser: downscaling uses stepwise halving for quality, and the .ico container and ZIP packaging are this site's own byte-level implementations - no uploads anywhere. The source does not have to be square beforehand: center-crop trims the overflow while keeping subject intact, and pad-to-fit keeps the whole image visible with transparent margins.
What actually lives inside favicon.ico
ICO is a container format: a directory of icon entries followed by their bitmap data. The modern approach packs PNGs directly into the ICO container (supported since Windows Vista by everything that matters), so one file carries 16, 32 and 48 sizes and browsers pick what they need. That is exactly what this tool emits - far smaller than the legacy BMP payloads.
Which sizes to tick
The minimal useful set is favicon.ico (16/32/48) plus a 512×512 PNG: the former covers tabs and bookmarks, the latter covers PWA installs and high-DPI displays. Add the 180×180 apple-touch-icon for iOS; Android Chrome reads 192 and 512 from the manifest. More sizes are not better - each one is a real download for every visitor.
Source quality caps icon quality
Icons are downscales, so detail survival depends on the source: a 512×512 original still reads clearly at 16×16, while a 64×64 source collapses into color blobs. Avoid hairline strokes and small text in the source - they cannot survive 16 pixels. Good icon sources are bold shapes and simple silhouettes.
Frequently asked questions
- Will browsers pick up my new favicon immediately?
- Not necessarily - favicon caching is notoriously aggressive. Hard-refresh (Ctrl+F5) after deploying, or add a version query to the reference (favicon.ico?v=2) to force a refresh.
- Where does favicon.ico go?
- In your site root (https://your-domain/favicon.ico) - browsers request that path automatically with no HTML needed. The HTML snippet declares the PNGs, touch icon and manifest and goes inside <head>.
- Why do my generated icons look soft at the edges?
- Anti-aliasing during downscale leaves semi-transparent edge pixels. For a crisp pixel-art look, design the source at an integer multiple of the target size, or use center-crop so the scale factor never drops below half.
- Are images uploaded?
- No. Scaling, ICO assembly and ZIP packaging all happen in your browser. The site has no backend at all and works offline.