A favicon used to be one file. Now it's eight.
The single 16×16 .ico era assumed one context: a browser tab. Today, the same site icon has to render correctly in a browser tab, a bookmarks bar, a Windows taskbar shortcut, an iOS home-screen icon, an Android home-screen icon, a PWA splash screen, and a manifest entry — and each of those surfaces requests a different pixel size to avoid visibly upscaling a too-small source. Ship one small icon and let every surface stretch it, and you get the soft, pixelated favicons still common on sites that never updated past the single-file era.
That's the actual reason this tool outputs eight sizes instead of one: 16, 32, 48, 64, 128, 180, 192, and 512 pixels, plus a favicon.png alias at 16px. Each size maps to a specific real placement rather than being an arbitrary range picked for coverage.
What each size is actually for
| Size (px) | Where it's used |
|---|---|
| 16 | Browser tab, bookmarks bar |
| 32 | High-DPI browser tabs, Windows taskbar |
| 48 | Windows site shortcuts |
| 64 | Higher-density shortcut and taskbar icons |
| 128 | Chrome Web Store / extension-style icon slots |
| 180 | Apple touch icon — iOS home screen |
| 192 | Android home screen, PWA manifest |
| 512 | PWA splash screens, largest manifest icon, app store listings |
Generating your favicon pack
Drop a square image onto the zone — 512×512 or larger works best, since every output size is a downscale from your source.
Preview the generated sizes (16, 32, 48, 64, 128, 180).
Copy the webmanifest and HTML snippet separately if you need them outside the .zip.
Click Download favicon pack to get a .zip with all sizes plus the manifest.
Why the source has to be square, mathematically
Every one of the eight output sizes is generated by resampling your source image into a square canvas. If the source image isn't square — say it's 800×600 — the tool doesn't crop it to a square first; it maps the full non-square source onto a square target, which means one axis gets stretched relative to the other. Concretely, an 800×600 image squeezed into a 512×512 output compresses the width by a factor of 512÷800 = 0.64 while compressing the height by 512÷600 = 0.85 — two different scale factors applied to the same image, which is exactly what produces visible distortion: circles become ovals, faces get subtly widened or narrowed.
Because that same non-uniform scaling gets baked into all eight generated sizes identically, it's far more efficient to fix the aspect ratio once before uploading — cropping to a square with the Image Resizer — than to try to fix distortion across eight separate output files afterward.
Why 512×512 as the recommended starting resolution
Since every smaller output size is produced by downscaling, starting from the largest target size (512px) guarantees every other size in the pack is a clean reduction with detail to spare. Going the other direction — upscaling a small source image up to 512px — can't add detail that was never captured; the renderer would be interpolating pixels that don't represent any real information in the original. If your only available source image is smaller than 512×512, expect the 512px and 192px outputs specifically to look softer than the smaller sizes, since those are the ones closest to or beyond your source's native resolution.
Why this pack skips .ico entirely
The .ico format exists because early browsers only understood that one specific format for favicons, and it works by bundling several bitmap resolutions inside a single container file. That constraint is gone: every current browser, every modern PWA implementation, and Apple's touch-icon system all read PNG favicons directly. PNG icons are both smaller per size than the equivalent resolution packed inside a legacy .ico container, and sharper, since there's no legacy bitmap encoding involved. Including a .ico file today would mean generating and shipping an extra, functionally redundant format that nothing modern actually requires — which is why the pack deliberately sticks to the standard PNG sizes instead.
What's inside the .zip, and how the pieces connect
The download bundles all eight favicon PNGs, a site.webmanifest file (the JSON that tells browsers and PWA installers which icon file to use at which declared size), an html-snippet.txt containing the exact `<link>` tags to paste into your page's `<head>`, and a short README explaining what each piece is for. Both the manifest and the HTML snippet are generated to reference the exact filenames included in the pack, so as long as you extract everything into the same folder referenced by your site, pasting the snippet in works without renaming or adjusting paths.
Common mistakes
Uploading a non-square source and being surprised the icons look stretched — square the image first, since the distortion compounds identically across all eight sizes.
Starting from a small source image and expecting the 512px output to look crisp — every generated size can only be as sharp as the source allows; there's no invented detail on upscale.
Manually hunting for a .ico generator elsewhere because a checklist mentions one — modern browsers, PWAs, and Apple devices all read the PNG sizes in this pack directly, with no .ico required.
Extracting only some files from the .zip — the webmanifest and HTML snippet reference specific filenames from the full pack, so partial extraction can break the references.
Real use cases
Generating a complete, correctly sized icon set for a new site launch in one pass, instead of manually resizing a logo eight separate times.
Adding proper PWA and Android/iOS home-screen icons to an existing site that only ever had a single small favicon.
Refreshing a site's favicon after a logo redesign, replacing every size consistently instead of missing a few stale cached versions.
Producing app-icon-style assets at multiple standard sizes for a lightweight web app without dedicated design tooling.
Frequently asked questions
Q: What sizes are included in the pack?
A: 16, 32, 48, 64, 128, 180, 192, and 512 pixel PNGs, plus a favicon.png alias at 16px and a site.webmanifest file.
Q: Should my source image be square?
A: Yes. Square source images avoid stretching. The tool will still process non-square images, but the output will be visibly distorted.
Q: What's in the .zip?
A: All favicon PNGs, a site.webmanifest, an html-snippet.txt to paste into your `<head>`, and a short README.
Q: Do you generate a .ico file?
A: No — modern browsers, PWAs, and Apple devices all support PNG favicons, which are smaller and crisper than an equivalent .ico. The pack includes the standard PNG sizes instead.
Q: Are my images uploaded?
A: No. The favicon pack is generated entirely in your browser using Canvas and JSZip.
Q: My logo has a transparent background — will that carry through to every size?
A: Since every output is a PNG, which fully supports an alpha channel, transparency in your source image carries through to all eight generated sizes without any of them acquiring an unwanted solid background.
Generate your favicon pack now
Build your icon set with the Favicon Generator. Need to crop your logo to a perfect square first? Use the Image Resizer. Working from a different source format? Try the Image Converter, or check Image to Base64 if you need to inline an icon directly in your HTML or CSS instead.
