Favicon / ICO Generator
Build a multi-resolution .ico from a single square source. Up to 5 images per batch.
How to use
Start from a square image
A 512 by 512 PNG with transparency is the ideal source. Anything with a lot of fine detail should be simplified first, because at 16 pixels almost none of it will survive.
Crop to the icon area
Use the cropper to trim away surrounding whitespace. Icons that fill their frame read far better at small sizes than ones floating in padding.
Pack and download
The browser renders each required size and sends them to be packed into a single .ico, which arrives in the ZIP with the rest of your batch.
Key Features
Several sizes in one file
The container holds 16, 32 and 48 pixel entries so browsers, bookmark bars and Windows shortcuts each pick an image drawn for their size rather than rescaling a single bitmap.
Each size rendered separately
Every entry is drawn from your original source at its exact target dimensions. Nothing inside the file is a downscale of another entry, which is what keeps the 16 pixel version readable.
Transparency preserved
Entries are rendered as PNG with their alpha channel intact before packing, so an icon with rounded corners or a transparent surround sits correctly on light and dark browser chrome.
Works with no markup
A favicon.ico at your site root is requested automatically by every browser. No link tag, no manifest entry, no build step, and it keeps working when everything else about the page changes.
Validated before packing
The rendered entries are checked against the PNG signature on arrival at the packer, so only genuine PNG data reaches the container writer.
Five sources per batch
You can pack up to five icons in one run, which is useful when you are producing favicons for several sites or several brands at once.
Frequently Asked Questions
Does my image get uploaded?+
They are processed in memory for the length of the request and are neither stored nor logged. The original full-size image never leaves your device.
Which sizes end up in the file?+
Does my source have to be square?+
Why does my detailed logo look like mush at 16 pixels?+
Is .ico still worth using, or should I use PNG or SVG?+
Where should the file go?+
Format Comparison
| Feature Specification | ICO favicon packing | Alternative |
|---|---|---|
| Sizes in one file | 16, 32 and 48 pixels | One size per file |
| Requires markup | No, requested automatically | Yes, a link tag |
| Transparency | Full alpha via PNG payloads | Full alpha |
| Browser coverage | Universal, including very old | Modern browsers |
| Where it runs | Rendered locally, packed on this site's server | Entirely in your browser |
Technical Overview & Specifications
Deep dive into ICO favicon packing architecture and processing.
Show DetailsHide Details
Technical Overview & Specifications
Deep dive into ICO favicon packing architecture and processing.
Platform Overview
An .ico file is not really an image format, it is a container. Inside it sits a directory listing several complete images at different sizes, and whatever is displaying the icon picks whichever entry suits the space available. That design predates the web entirely: Windows needed one file that could serve a 16 pixel entry in a list, a 32 pixel desktop shortcut and a large tile in a file browser, without any of them being a blurry rescale of another. Browsers inherited the convention for favicons, and despite years of newer proposals the .ico at the site root remains the thing that works everywhere with no markup at all.
This tool takes a square source image and produces an .ico containing 16, 32 and 48 pixel entries, which is the set that actually gets used in practice. Each entry is rendered separately from your original at its exact target size rather than being downscaled from a larger version inside the file, which is what keeps the small sizes legible. Feed it something square: a rectangular source will be squashed into the square frame rather than cropped, and the result rarely looks like what you intended. The packing step is the one part of this page that does not happen in your browser, because writing a valid ICO container is done on this application's server.
How the container is assembled
An ICO file opens with a small header giving the number of images it contains, followed by one directory entry per image recording its width, height, colour count, byte length and offset into the file. After the directory come the image payloads themselves. Historically those payloads were device independent bitmaps with a separate one-bit mask for transparency, which is why very old icons have hard jagged edges. Since Windows Vista the format has also accepted complete PNG streams as payloads, which is what this tool writes: it gives you real 8-bit alpha and much smaller files than the bitmap encoding ever managed.
The browser side does the rendering. Your source is decoded once to an image bitmap, then drawn into a separate OffscreenCanvas for each target size with any crop you set applied to the source rectangle. Drawing from the original for every size, rather than scaling one intermediate down repeatedly, is what preserves legibility at 16 pixels where every pixel counts. Each canvas is serialised to PNG and posted to the packing endpoint, where the bytes are verified against the PNG signature before the png-to-ico library assembles the directory and payloads into a single container. The finished .ico comes back in the response body and is added to your ZIP.