Favicon Generator

A single favicon.ico in your site root still works, but it is no longer enough. Browsers ask for a 16px and 32px PNG for tabs and bookmarks, iOS wants a 180px apple-touch-icon for the home screen, and Android and progressive web apps read 192px and 512px icons out of a web manifest. Miss the manifest icons and Android will render a blurry upscale of your 32px tab icon on someone's home screen.

This tool writes all of them from one source image, so you are not exporting six files by hand and guessing at the names. The file names it uses are the conventional ones — favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png — which means the HTML snippet works as-is and matches what most tutorials and frameworks expect.

The favicon.ico it produces is a genuine multi-resolution icon containing 16, 32 and 48 pixel images in one file, not a PNG with the extension renamed. Windows picks the 48px version for desktop shortcuts, browsers take the 16 or 32.

The single most common favicon mistake is shrinking a full wordmark down to 16 pixels, where it becomes an unreadable smudge. At that size you have roughly the detail budget of a single letterform. The tab preview above shows your icon at its real size for exactly this reason — if you cannot tell what it is there, neither can anyone else.

What survives: a single bold letter, a simple geometric mark, a high-contrast silhouette. What does not: thin strokes, gradients, more than two colours, any text longer than one or two characters, and fine detail of any kind.

If your logo is a horizontal wordmark, do not use it. Crop to the symbol, or make a square version using just the first letter. Most well-known sites do exactly this — the tab icon is a simplified sibling of the main logo, not the logo itself.

Favicons are square, so a non-square source has to be adapted. Crop to square fills the whole icon and trims whatever falls outside the centre square, which suits marks that are already roughly square. Fit whole image keeps everything and pads the sides, which suits wide or tall marks you cannot afford to cut.

Leave the background as None to keep transparency, which is usually right — a transparent favicon sits cleanly on both light and dark browser chrome. Choose a solid colour when your mark is a single colour that would vanish against one of those, for example a white logo that becomes invisible on a light tab bar.

Downscaling to 16 pixels in one jump produces a mushy result, so each size is generated by halving the image repeatedly and only then stepping to the exact target. It is a slower path than a single resize and it is the reason the small sizes stay legible.

Unzip everything into the root directory of your site, alongside index.html, then paste the HTML snippet into the head of every page. If you use a layout template or a component, put it there once rather than repeating it. The paths in the snippet start with a slash, so they resolve from the site root regardless of which page a visitor lands on.

Browsers cache favicons aggressively, often ignoring a normal reload. After deploying, expect to hard-refresh, open a private window, or wait, before you see the change. This catches out almost everyone at least once — the files are usually fine.

The site.webmanifest carries your site name and theme colour, which control the label under the icon and the browser chrome colour when someone installs your site to a phone home screen. Both are editable above before you download.