Favicon Generator

Designing for sixteen pixels

A favicon is the small square identifying your site in a browser tab, a bookmark list, a search suggestion, and a phone home screen. In a tab it is typically rendered at sixteen or thirty-two device pixels. That is an extremely small canvas, and it is the constraint that should drive every design decision.

Shrinking a full logo almost never works. Wordmarks blur into an unreadable smear, thin strokes disappear during downscaling, and detailed illustrations become visual noise. A favicon is better understood as a separate mark borrowing the logo's identity: usually one letter, a two-letter monogram, or a single distinctive shape lifted from the larger design.

What makes a mark survive

Marks that read clearly at small sizes share a short list of properties, and the ones that fail usually violate several at once.

• Strong contrast between the foreground shape and its background.
• Thick strokes, since hairlines vanish or alias into grey mush when downscaled.
• At most two characters of text; three or more will not be legible.
• A shape that fills the square rather than floating inside generous padding.
• A solid background colour, because a transparent mark designed for light tabs disappears in dark mode.
• Few colours. Gradients and subtle shading are wasted at this scale.

The sizes that get requested

Different contexts ask for different files, and covering the common set avoids browsers falling back to a blurry upscale of whatever they can find. Sixteen and thirty-two pixels handle browser tabs on standard and high-density screens. Forty-eight covers Windows shortcuts. One hundred and eighty is the Apple touch icon used when someone adds your site to an iOS home screen. Android and progressive web apps request 192 and 512 pixel versions through the web app manifest.

A favicon.ico at the site root is still worth providing. Some browsers and crawlers request that exact path directly regardless of what your HTML declares, and serving a 404 for it produces noise in your logs at best.

Generating and installing

This generator takes a square source image, crops from the centre, and exports the sizes above along with a favicon.ico, entirely in your browser. Start from the largest clean version of your mark you have, ideally 512 pixels square or more, because downscaling produces far better results than enlarging a small source.

After downloading, place favicon.ico at your site root and reference the PNG sizes from your document head or your framework's metadata configuration. Then check the result in a private browsing window: browsers cache favicons unusually aggressively, and a correctly installed new icon can appear stale for days in a normal window.