Favicon Generator — ICO and PNG from Any Image

One image in, a real favicon.ico out

A favicon is the small icon a browser shows in the tab, the bookmark list, the history menu, and next to a result in search. The confusion this tool clears up is the one most generators skip: the difference between a PNG named like an icon and an actual .ico file. ICO is a container format from 1993 that holds several bitmap images at once, so a single favicon.ico can carry the 16x16, 32x32, and 48x48 versions and let the browser pick whichever the current context needs. This tool builds that real multi-size ICO — not a renamed PNG — by writing a 6-byte header (2 reserved bytes, type field set to 1, then the image count of 3), a 16-byte directory entry per image recording width, height, 1 colour plane, 32 bits per pixel, the byte length, and the file offset, and finally the raw PNG bytes for each of the 3 images, all assembled into one binary blob in your browser. The directory starts at offset 6, each entry is exactly 16 bytes, so pixel data begins at byte 54 (that is 6 + 3 x 16), and every multi-byte field is written little-endian to match the original 1993 Windows specification.

It also renders 7 standalone PNGs — 16, 32, 48, 64, 128, 192, and 512 pixels — because the modern web needs both. The ICO covers legacy and desktop browser chrome; the larger PNGs feed mobile home screens and Progressive Web App manifests, which ignore ICO entirely and want PNG. That split, ICO for the classic root file and PNG for everything newer, is why a complete favicon set in 2026 is 8 files, not 1.

Which size shows up where

Each size exists for a concrete surface, and shipping the wrong set means a blurry icon somewhere. The 16x16 is the browser tab and address bar on a standard-density display; 32x32 is that same tab on a Retina or 2x screen, plus the Windows taskbar. 48x48 is the Windows desktop shortcut and some right-click menus. 64x64 covers 4x high-density desktop shortcuts. Then the mobile and app tier: 128x128 is used by the Chrome Web Store and some extensions, 192x192 is the Android home-screen icon defined in the web manifest, and 512x512, the largest of the 7 sizes, is the PWA install icon and splash graphic. Apple's apple-touch-icon is nominally 180x180; the 192 works as a close stand-in when you want one fewer file.

The three smallest — 16, 32, 48 — are the ones packed into favicon.ico, because those are the sizes browser chrome requests from the root file. The rest stay as separate PNGs you link explicitly. That is why the ICO here weighs only a few kilobytes: it holds three tiny images, not all seven.

Why a 16x16 sometimes looks muddy

The most common disappointment is a logo that looks sharp at 512 but muddy at 16. That is not a bug in the resizer — it is the physics of 256 pixels. A 16x16 icon is a grid of just 256 cells, against the 262,144 cells in a 512x512 source, a 1,024-to-1 reduction, so the tool has to collapse 1,024 source pixels into each single output pixel. One bold letter or a simple symbol survives that; a wordmark, a thin outline, or a detailed illustration has more strokes than pixels, so the canvas averages neighbouring colours and the edges turn to grey mush. This tool sets the canvas imageSmoothingQuality to high, which gives a cleaner downscale than the browser default, but no algorithm can fit 262,144 pixels of detail into 256 slots, a 99.9% discard. The fix is on the input side: feed it a large, square, high-contrast source, and for the tiny 16 and 32 sizes design a simplified mark — an initial or a single glyph — rather than the full logo.

The other limit worth stating plainly: this tool downscales, it never upscales for quality. Uploading a 32x32 source and asking for 512x512 gives you a soft, enlarged 512 with no new detail, because the information was never captured. Start at 512 or higher and let the tool shrink. If the source is not square it gets stretched to a square, distorting the icon, so square-crop it first with the crop-image tool.

What the 8 files actually weigh

A full favicon set is small. The 16x16 PNG (256 pixels) typically lands near 0.5 KB, the 32x32 (1,024 pixels) near 1.2 KB, and the 48x48 (2,304 pixels) near 2 KB, which is why the multi-size favicon.ico bundling those 3 usually totals between 2 KB and 5 KB — the tool shows the exact byte count on the download card. The larger PNGs scale roughly with pixel area: 64x64 (4,096 pixels) around 3 KB, 128x128 (16,384 pixels) around 8 KB, 192x192 (36,864 pixels) around 15 KB, and 512x512 (262,144 pixels) anywhere from 20 KB to 80 KB depending on how much colour and detail the source carries. Add them up and a complete 8-file set is often under 120 KB, a rounding error against a single 500 KB hero photo, so there is no bandwidth reason to ship fewer sizes than your 5 surfaces need.

Those numbers assume a reasonable source. A 4000x4000 photograph fed in as the logo produces a 512 PNG far heavier than 80 KB and wastes bytes on detail no favicon can show. Feeding a clean 512x512 or 1024x1024 mark keeps every output lean while still downscaling sharply to the 16-pixel floor.

Wiring the files into a site

Drop favicon.ico in the site root first — browsers auto-request /favicon.ico even with no link tag, so having it there stops a 404 on every page view. Then declare the rest in the HTML <head>: a rel="icon" pointing at the ICO with sizes="any", a PNG rel="icon" at 32x32 for crisp modern rendering, and a rel="apple-touch-icon" at 180x180 for iOS. For an installable PWA, list the 192 and 512 PNGs in manifest.json with their type and sizes fields set. The browser reads every declaration and loads the single best match per surface, so more correct sizes means fewer compromises, never a penalty.

Quick reference

• ICO output: one favicon.ico packing 16, 32, 48 px (3 images, ~2–5 KB).
• PNG output: 16, 32, 48, 64, 128, 192, 512 (7 files).
• Tab and chrome: 16 (1x), 32 (2x), 48 (Windows), 64 (4x).
• Mobile and PWA: 128, 192 (Android home screen), 512 (install and splash).
• Best source: square, high-contrast, 512 px or larger.
• Engine: HTML5 canvas resize + byte-level ICO assembly in JavaScript.
• Downscale: imageSmoothingQuality high; no upscaling for quality.
• Privacy: 100% in-browser; the logo is never uploaded.
• Cost: $0, unlimited, no watermark, no sign-up.