What a favicon generator has to produce in 2026
Not one file. Three different consumers each look in a different place, and satisfying only one of them leaves visible gaps.
Browsers request /favicon.ico from your site root automatically, whether or not
your HTML mentions it. That makes the .ico the reliable floor: it works even if
your markup fails to load.
iOS looks for apple-touch-icon.png at 180 pixels and ignores the .ico entirely.
Without it, adding your site to a home screen produces a screenshot of the page
instead of your icon.
Android reads the icons declared in a web manifest, needing 192 for the home screen and 512 for the splash screen. Without the manifest it also falls back to something generic.
This tool writes all of it: the .ico with three embedded sizes, six PNGs, a manifest, and the markup that wires the non-probed files up.
Check the 16-pixel preview before anything else
This is the step most people skip, and it is the one that matters.
Sixteen pixels is about the width of a lowercase letter in this paragraph. A wordmark is illegible at that size. Thin strokes vanish. Gradients become a single muddy colour. Two similar shapes merge into one blob.
The previews above render your actual file at 16, 32, 48 and 180 pixels, at those real sizes rather than scaled-down mockups, because that is the only honest way to see it. If the 16-pixel version is unreadable, the fix is not a better generator: it is a simpler icon. Use the symbol from your logo rather than the whole lockup, drop the tagline, thicken the strokes, and raise the contrast.
To generate favicon from image files that are not square
Icons are square everywhere they appear. A wide logo has to become a square somehow, and this tool centre-crops rather than squashing, because distortion is far more noticeable at small sizes than a trimmed edge.
If the important part of your artwork is not centred, crop it to a square yourself before uploading it here, so you decide what stays in frame.
Where the files go
Unzip everything into your site root, so the files resolve at /favicon.ico,
/apple-touch-icon.png and so on. Then paste the included head markup into your
template.
The manifest has empty name and short_name fields on purpose, so nothing ships
a placeholder to production. Fill them in with your site's name before deploying.