Generate a Favicon From Your Logo

How it works

The source image is decoded once, and the largest centerd square is taken from it so nothing is distorted. Each output size is then rendered from that square independently.

Rendering each size separately matters more here than anywhere else on this site, because the reductions are extreme. Going from a 1024-pixel logo to 16 pixels is a 64-fold reduction, and drawing that in one step samples roughly one source pixel in four thousand. The result is unpredictable — a thin line might vanish entirely or might land exactly on a sampled pixel and appear at full strength. Halving repeatedly averages the whole area into each output pixel, which is the difference between a recognizable shape and a colored smudge.

The ICO file is assembled by hand from those PNGs. An ICO is a small directory — six bytes of header, then sixteen bytes per image describing its size, bit depth, length, and offset — followed by the image data concatenated. Since Windows Vista the images may be PNGs rather than the original bitmap format, and every browser in use supports that, so this writer stores PNGs. It avoids implementing bitmap encoding, and more usefully it avoids the format's most notorious trap: in the bitmap layout the header's height field has to be twice the real height, to account for a transparency mask that is no longer used.

The Apple touch icon is the one file rendered onto an opaque background, because iOS composites home-screen icons over black rather than honoring their alpha channel.

What to check before you ship

Look at the 16-pixel version. It is the one that appears in browser tabs, it is the smallest thing your brand will ever be displayed at, and it is where most logos fail. Text of any kind becomes illegible. Thin strokes disappear. Two similar colors merge into one.

If it does not survive, the answer is a separate simplified mark rather than a different tool. Most well-known brands use a distinct icon at small sizes — a single letter, a symbol lifted out of the full lockup, or a solid shape with the letterform knocked out. That work happens in a design tool, before this one.

Installing the files

Put all five files in your site's root directory, so they are reachable at paths like /favicon.ico and /apple-touch-icon.png. Then paste the generated snippet into the head of every page — a shared layout or template, not each page by hand.

The sizes="any" attribute on the ICO link tells modern browsers not to bother downloading it when they have already found the PNG, while leaving it available for the ones that want it.

If icons do not change after you deploy, it is almost certainly caching. Favicons are cached unusually aggressively, by the browser and often by a CDN as well. A hard refresh frequently is not enough; opening the icon URL directly and reloading that is the reliable way to check what is actually being served.