Favicon Generator

256 pixels is the whole budget

A 16-pixel square holds 256 pixels, and every decision the mark makes is paid for out of that grid. One pixel of stroke is a sixteenth of the width — the same proportion as a 60-pixel bar running across a 960-pixel layout. Two lines of type become two rows of pixels. A gradient has sixteen steps to work with, which is a smudge rather than a transition.

A 16 × 16 icon, drawn on its grid:

        ................      a 1px stroke is the thinnest mark
        ......####......      the grid can hold — and it must sit
        ....##....##....      exactly on a cell boundary
        ...##......##...
        ...##......##...      the interior of a letter has 2 or 3
        ...##......##...      pixels of height, at most
        ...##......##...
        ....##....##....      nothing thinner than 1px exists,
        ......####......      and nothing smaller than 1px can
        ................      be rendered

        256 cells, 16 of them one stroke wide = 6% of the icon
        per line. There is room for one shape, and no more.

That is why the source artwork is almost never the right thing to scale down. A logo with a gradient, a drop shadow, a thin rule or a second line of type has nowhere to put any of it at this size, and the browser's downscaler averages all of it into grey. The mark that works at 16 is usually a simpler drawing of the same idea — one bold shape, high contrast against its background, nothing inside it. Keep the detailed version for the 512-pixel file, where the room exists.

Draw it on the grid rather than scaling it down

A mark whose edges fall in the middle of a pixel gets anti-aliased across two columns, and at 16 pixels that reads as blur — the icon looks soft next to its neighbours in the tab strip even though nothing is technically wrong with it. Hand-drawing the small size means putting edges on cell boundaries deliberately, squaring a curve into a corner where the curve would only be one pixel wide, and snapping the whole shape to the grid.

Two habits make a disproportionate difference. Text at this size wants to be a single glyph or nothing at all; two letters side by side read as a smudge, and a capital letter alone usually reads. And a mark drawn on a transparent background should be checked against both a light and a dark tab strip, because the browser paints its own background behind it and a mark that depends on one of them disappears on the other.

The head, one tag at a time

The set only exists once the page names it. A browser with no declaration at all will ask for /favicon.ico by name and use whatever it finds there, which is why a site with no icon tags often still shows something in the tab — usually a file nobody has looked at in years. Naming the sizes explicitly is what makes the page show the mark you chose rather than the one it found.

A rel="icon" tag carries a type and a size, and the size is what lets a browser pick without downloading anything. Declaring the 16 and the 32 as separate PNGs gives it both to choose from; declaring a single file leaves it to scale one, which is exactly the downscaling the small mark was drawn to avoid. The Apple touch icon is a rel="apple-touch-icon" with no size attribute, because iOS asks for the 180-pixel file by convention rather than by negotiation.

The rest of the head matters less than the icon and gets more attention than it deserves. A theme-colour meta tag tints the browser's own chrome on mobile, which is worth having if the site has a colour and adds a line otherwise. A multi-resolution .ico is a container for clients that predate PNG favicons, and every current browser reads the PNG files happily, so a site that only has to work today can leave it out and still look right everywhere.

When the icon has to be an install

A web app manifest is a separate file that describes the site to the operating system, and the icons inside it are what a home-screen entry, a launcher shortcut and an install splash screen draw. Those are declared in the manifest rather than in the head, with a purpose field saying whether the file is a normal icon or a maskable one — and the distinction matters, because Android applies its own shape to a maskable icon and crops whatever falls outside it.

Two files cover it in practice: a 192-pixel icon for the launcher entry and a 512-pixel one for the splash and store listings. Both should fill their square edge to edge with the background colour rather than sitting on transparency, since the transparent margin becomes a coloured rim the moment the launcher crops to its shape. If a square source is not what you have, the Image Resizer will cut one, and a JPEG logo becomes a PNG that can hold an alpha channel in the Image Converter.