Create a favicon

What matters

Favicons are often displayed at just 16 pixels. Fine lines, text and detailed logos become indistinct. A single symbol, clear shape and strong colours work best. The browser tab preview shows the actual size.

Place the files in your website's root directory, alongside robots.txt and sitemap.xml . Browsers may look for favicon.ico there automatically, but the markup in the <head>.

The Apple icon always receives an opaque background because iOS may otherwise display transparent areas as black.

Your image stays on your computer. All sizes are generated in the browser, without sending anything to a server.

Why one image is not enough

Favicons are needed at several sizes: 16 pixels in tabs, 32 for bookmarks, 180 for iPhone home screens, and 192 and 512 for Android and web app manifests. Letting the browser downscale a detailed logo can produce a blur at 16 pixels.

This tool generates each size separately, together with favicon.ico containing several resolutions. Older browsers and some search engines request this root-level file directly without checking the markup.

What constitutes a good motive

At 16 pixels, one clear shape works better than text. Thin lines disappear; solid shapes with strong contrast remain recognisable. Leave around ten percent padding to avoid clipping in round tiles.

Dark mode also matters. A black logo on a transparent background can disappear in a dark tab. Choose colours visible on both backgrounds or include a background.