Favicon Generator - Create favicon.ico and PWA Icons

What This Favicon Generator Produces

A favicon stopped being a single file a long time ago. A browser tab wants 16 pixels, a retina tab wants 32, a Windows desktop shortcut wants 48, an iPhone home screen wants a 180 pixel PNG, and an installable web app wants 192 and 512 pixel icons declared in a manifest. This tool takes one source image and emits all of it at once: favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, and a site.webmanifest, bundled into a ZIP alongside the four lines of HTML that wire them up. The .ico is built by hand rather than delegated to a converter. ICO is a container format, not a codec: a six byte directory header records how many images are inside, then one sixteen byte entry per image records its width, height, byte length, and absolute offset, and the image payloads follow. Every browser in current use accepts PNG data inside those payloads, so this generator writes PNGs rather than the legacy BMP/DIB encoding with its bottom-up row order and separate one bit transparency mask. Three images go in — 16, 32, and 48 pixels — so Windows and older browsers can pick the size they need instead of scaling one badly. One quirk of the format is worth knowing if you ever inspect the bytes: width and height each occupy a single byte, so 256 is written as zero and nothing larger can be expressed at all. Scaling quality gets the same attention. Shrinking a 1024 pixel logo straight down to 16 pixels in one drawImage call asks the browser's bilinear filter to summarise a 64 by 64 block from a 2 by 2 sample, discarding almost every source pixel and producing the speckled mess that hand-rolled favicons are known for. This tool halves the image repeatedly instead, never reducing by more than half in a single step, so each pass averages a full neighbourhood and fine detail survives all the way down to 16 pixels. Corner radius and padding are applied as part of that render rather than after it, which keeps the rounded edge anti-aliased at every size.