Free Favicon Generator
One image in, every favicon size out — plus the HTML you need to paste.
Modern browsers, iOS home screens and Android launchers all want different icon sizes. Drop in a square image and get each one as a PNG, generated locally through the Canvas API. The markup to reference them is produced alongside, so you can copy it straight into your page head.
Click to select or drag & drop a square image here
PNG, JPG, WebP or SVG · at least 512×512 recommendedHow it works
Choose a square image
At least 512×512 gives the sharpest result.
Check the previews
Every size that browsers and devices ask for.
Download and paste
PNGs plus the markup for your page head.
Which sizes actually matter
The list of "required" favicon sizes has grown absurd over the years, and most of it is obsolete. In practice five cover everything that matters. 32×32 is what desktop browsers show in the tab and bookmarks bar. 16×16 is still used in some bookmark lists and older interfaces. 180×180 is the Apple touch icon, used when someone adds your site to an iOS home screen. 192×192 and 512×512 are the Android and web-app manifest sizes, the second also serving as the splash image for installed progressive web apps.
Everything beyond that — the dozens of Windows tile sizes, the older Apple sizes for long-superseded devices — is legacy. Serving fewer, correct sizes is better than serving thirty that nobody requests.
Why your favicon looks like mush at 16 pixels
A favicon is not a shrunken logo; it is a different design problem. At 32 pixels you have roughly a thousand pixels in total to work with, and at 16 you have 256. Detail that reads perfectly on a business card disappears entirely at that scale — thin strokes vanish, gradients band, and any text below about three characters becomes an unreadable smudge.
What survives is a single bold shape with strong contrast against both light and dark backgrounds. Browsers place favicons on tab strips that are pale in light mode and dark in dark mode, so an icon relying on a white background can disappear against one of them. If your logo is a wordmark, use its first letter or its symbol rather than the whole thing.
Start from the largest source you have, ideally an SVG or a 512-pixel PNG. Downscaling from a large original gives the browser clean pixels to work with; upscaling a 32-pixel image to 512 produces a blurry result at every size. This tool renders each size directly from your source rather than scaling one output down to the next, so each is as sharp as the original allows.