Favicon Generator from an Image

A favicon is the smallest piece of branding a website has and the one that appears most often - in every tab, every bookmark, every history entry. It is also the one most likely to be an accident: a scaled-down logo that turned into four grey pixels, or the default document icon that never got replaced.

This generator takes one image and renders it at four sizes: 16, 32, and 48 pixels for browser use, and 180 pixels for the Apple touch icon that iOS uses when a site is saved to a home screen. Each is produced as a PNG you download individually.

The rendering is the easy half. The hard half is design, because a mark that works on a business card almost never works at 16 pixels, and the section below is about what does.

Sixteen pixels square is 256 pixels in total, of which perhaps a hundred carry any signal. That is enough for one bold shape, one letter, or two at a stretch. It is not enough for a wordmark, a tagline, a thin outline, a gradient, or any detail smaller than about a fifth of the width - all of which disappear or turn to mud.

The instinct to submit the full company logo is therefore the main thing to resist. What works is a fragment of the identity that carries the recognition: the first letter of the wordmark, the icon half of a combination mark, or a distinctive silhouette. Set it large in the frame with minimal padding, because at this size margin is expensive and every pixel of the shape counts.

Contrast is the second requirement. This generator draws onto a white background, so a light or pastel mark will fade into the tab strip, and a mark whose recognisability depends on a coloured background loses that background entirely. Test by looking at the 16-pixel preview at its true size rather than at the enlarged version - if you cannot tell what it is, neither can anyone glancing at a row of tabs.

Modern browsers read icon declarations from the document head and pick the size closest to what they need, so the pattern is one link element per size with the dimensions declared. Place the PNGs somewhere stable, then reference each with a rel of icon, a type of image/png, and a sizes attribute matching the file - 16x16, 32x32, and 48x48. The 180-pixel file goes in separately with a rel of apple-touch-icon and no type.

Two conventions are worth knowing. Browsers still request /favicon.ico from the site root whether or not you declare anything, so an absent file there produces a harmless but persistent 404 in your logs; and a progressive web app needs a manifest with its own icon entries at larger sizes, typically 192 and 512, which this tool does not produce.

Caching is the other thing that catches people out. Favicons are cached aggressively by browsers, often beyond a normal reload, so a replacement icon can appear not to have taken effect. Adding a version query string to the file path, or checking in a private window, distinguishes a caching artefact from a genuine problem.

Your file is read into the page and decoded once, then rendered four separate times. For each target size a square canvas is created at that size, filled with opaque white, and your image is drawn onto it scaled by whichever of the two dimensions requires the larger factor - a cover fit - and centred, so the canvas is always completely filled and the overflow is cropped symmetrically.

That means a non-square source loses its edges. A wide logo rendered into a square favicon is cropped to its middle, which is frequently not the part you wanted; the fix is to prepare a square source with the mark centred before uploading rather than to expect the tool to letterbox it.

Each canvas is then exported as a PNG data URL, which is what both the on-screen preview and the download use. The previews are displayed with pixel-snapping rather than smoothing, so the 16-pixel version shown enlarged accurately represents its blockiness instead of hiding it behind interpolation. All four renders happen in the browser with nothing uploaded.