Favicon generator
Generate a complete favicon set in your browser: a multi-size .ico, the PNGs, the manifest and the markup.
Runs in your browser
Safari composites apple-touch-icon on black, so a transparent one comes out with a black surround.
Pick a square image, ideally 512px or larger.
Downscaling to 16px is done in steps rather than in one jump, which keeps small icons legible instead of mushy.
What a site actually needs
A generator that hands back one PNG has not done the job. The awkward pile a site needs is:
favicon.icowith 16, 32 and 48px inside one file. Browsers still ask for it by that exact path even when you never link to it.favicon-96x96.pngfor higher-density displays.apple-touch-icon.pngat 180px, for an iOS home screen.android-chrome-192x192.pngand 512x512, referenced by the manifest.site.webmanifestwith those two icons filled in.- The
<link>and<meta>block, which is the part most often wrong.
All of it comes out as a zip.
Two things this gets right
The Apple icon gets a background. Safari composites apple-touch-icon onto
black, so a transparent logo arrives with a black surround on someone’s home
screen. Filling the background is the fix, and it is on by default.
Downscaling is done in steps. Going from 512px to 16px in one drawImage
samples too sparsely and produces mush. Halving repeatedly averages the whole
image down, and the difference at 16px is between a legible mark and a smudge.
Designing for 16 pixels
A 16px favicon is about 40 physical pixels of nothing. A full logo will not survive it.
Take the strongest single element — a letter, a monogram, one shape — and drop everything else. Thin strokes disappear, so weight them up. Fine detail becomes noise. And check it against both a light and a dark browser theme, because a dark logo on a transparent background vanishes in dark mode.
Test the result at actual size in a tab rather than at 100% on screen.
Nothing is uploaded
The whole set is generated in this page, and the zip is assembled in memory.