Favicon Generator

Detailed guidance

Why one icon is not enough

A tab, a home screen, and an installed app each ask for something different, and each asks at a different size. Browsers will scale what you give them, which is how sites end up with a blurry square in the tab: a 512 px artwork squeezed to 16 px by a browser trying to be helpful. Providing the actual sizes costs nothing and is the difference between a mark that reads as a logo and one that reads as a smudge.

What a modern .ico file really contains

The .ico container is a small table of pointers followed by the images themselves. Older files hold raw bitmaps with a separate mask; what current browsers and Windows accept now is a PNG inside the container, which keeps real alpha and compresses far better. The file this page writes is that modern form: one header, four sizes, each entry a PNG drawn from your original artwork.

Padding, and why the small sizes need it

Artwork that runs to the edge of its square loses that edge the moment it is scaled down, because the browser rounds pixels off and the outer row goes semi-transparent against whatever the tab colour is. A few percent of padding inside each size keeps the mark whole at 16 px. Too much and the icon shrinks into a dot, which is its own common failure on a crowded tab strip.

The manifest and the two names that matter

An installed web app reads its icons from a manifest rather than from a link tag, and it wants at least a 192 px and a 512 px entry. The generated file names those two and declares standalone display. The name is taken from your file and the background colour from your choice, so open it once and fix the two lines nobody could guess — a manifest with a wrong name is the most common way an install prompt shows the wrong label.

What no generator can fix

A wordmark, a photograph, and a detailed illustration do not become good 16 px icons. If your logo is a name, use its initial for the small sizes. If it is a photograph, the tab is not where it belongs. And if the artwork only reads in colour, remember that a dark mark on transparent disappears in a dark tab — tick the solid background option and choose the colour your site uses.

The sizes exist so a browser never has to do the downscale itself. A 512 px artwork squeezed into a 16 px tab slot uses a fast filter with no idea that your mark has thin strokes, which is how a crisp logo becomes grey mush. Here each size is measured against its own square and padded inside it, so the small files keep their edges. Look at the 16 px version before deploying, because it is the one people see most and judge least generously.