Favicon & App Icon Generator

How to use Favicon & App Icon Generator

1. Drop an image or logo onto the Source image panel, or click browse files (or Example).
2. If the image isn't square, choose Crop to center square or Pad to square, and pick a padding background color or leave it transparent.
3. Optionally set a Theme color, used in the generated site.webmanifest and meta tag.
4. Click Download all to save every icon file at once, or download each asset (and the manifest) individually.

What this tool generates

A modern site needs several icon files, each read by a different browser or OS: a small multi-size .ico file for legacy compatibility and browser tabs, a 180×180 PNG for iOS home-screen icons, and 192×192/512×512 PNGs referenced from a site.webmanifest for Android and PWA install prompts. This tool generates all of them from a single source image, entirely with <canvas> resizing in your browser — no server, no upload.

How the favicon.ico file is actually built

A .ico file is a small, well-documented binary container, not a special image codec. Its header (ICONDIR) lists how many images are embedded; each image gets a 16-byte directory entry (ICONDIRENTRY) describing its width, height, bit depth, byte size, and — critically — the exact file offset where its data starts. Modern icon readers (every current browser and OS) accept a complete PNG file as that embedded data, so this tool never touches raw bitmap encoding:

ICONDIR (6 bytes): reserved=0, type=1, count=2

ICONDIRENTRY #1 (16 bytes): 16x16, 32bpp, size=<16px PNG length>, offset=38
ICONDIRENTRY #2 (16 bytes): 32x32, 32bpp, size=<32px PNG length>, offset=38 + <16px PNG length>

[16x16 PNG bytes][32x32 PNG bytes]

The offset field is the part most likely to be wrong: entry #2's offset must equal entry #1's offset plus entry #1's real, measured PNG byte length — not a rounded or assumed value. This tool's offset math was hand-verified in a Node test that checks every header field, the offset of every entry, and confirms that the bytes sitting at each declared offset actually begin with the PNG magic number (0x89 0x50 0x4E 0x47) before ever shipping.

How non-square images are handled

Stretching a non-square logo to force it into a square would distort it, so this tool never does that silently. Pick Crop to center square to keep the middle square portion of the image, or Pad to square to scale the whole image down to fit inside the square and fill the leftover space with a background color (or leave it transparent) — the square preview updates instantly so you can see exactly which one you're getting before downloading.

Frequently asked questions

Does this tool crop or stretch non-square images?

It never stretches an image to force it square, since that would distort it. Choose either center crop (keeps the middle square portion) or padding (scales the whole image down to fit, filling the extra space with a background color or leaving it transparent).

Is the generated favicon.ico a real, working icon file?

Yes. It's a genuine ICONDIR container built byte-by-byte with a 16x16 and a 32x32 PNG-compressed image inside, following the same format modern browsers and operating systems read — not a renamed PNG.

Can I upload an SVG logo?

Yes. SVG sources are rasterized in your browser using a canvas at each target size, so a vector logo comes out crisp at every resolution.

Is my image uploaded anywhere?

No. Every resize and file assembly happens locally using the Canvas API and typed arrays in your browser — your image never leaves your machine.