Generate a favicon

How to use it#

1. Drop your logo into the box above, or choose Text or emoji and type up to three characters.
2. Choose whether the background stays transparent or takes a colour. For text, pick the text colour and the shape of the tile.
3. Tick the 256 pixel option if the .ico is for a Windows desktop shortcut, and add your site name for the manifest if you want one.
4. Download them all as a zip, or take any single file on its own.
5. Copy the markup at the bottom into the head of your pages.

Why one file is still not enough#

The .ico file is the oldest part of the web that is still load bearing. It can hold several images at different sizes in one file, which is why a browser asking for /favicon.ico with no markup at all still gets something sensible: 16 pixels for a tab, 32 for a bookmark, 48 for a desktop shortcut.

Everything since has been added on top rather than replacing it. Phones want a larger square for a home screen, Apple asks for its own file name, and an installable web app declares its icons in a manifest instead of in the page. The result is that a site needs a handful of files, and the ones it does not have get guessed at.

Google Search shows the favicon from your home page beside your results. It accepts any square icon of 8 pixels or more, but recommends one larger than 48 pixels, so it stays sharp on screens that show it bigger. A site that links only a 16 or 32 pixel favicon gives it little to work with, which is why the markup here links 48 and 96 pixel PNGs as well.

Designing for sixteen pixels#

A favicon is displayed at about the size of a full stop on a printed page. A logo that reads at the top of a website, with a wordmark and a tagline, becomes a grey smear. What survives is one shape with high contrast against both a light and a dark tab strip.

The practical test is to look at the 16 pixel preview above rather than the 512 one. If you cannot tell what it is, use part of the logo rather than all of it: the initial, the symbol, the one recognisable silhouette. Plenty of well known sites use a mark in the tab that never appears anywhere else.

A favicon from a letter or an emoji#

A site without a logo yet still needs something in the tab, and a single letter on a coloured tile is what many well known sites use anyway. It reads at 16 pixels, where a detailed logo does not. Choose Text or emoji, type one or two letters, and pick the colours.

The letters are drawn bold, in your system’s own sans-serif or serif, or in a mono, script, or handwritten font that comes with this page. Each size is drawn at that size rather than shrunk from a large one, so the 16 pixel version stays as sharp as it can. An emoji is drawn in your system’s own colour emoji, which is why the same emoji looks a little different on a Mac, on Windows, and on Android. The files you download carry whichever design you saw here, so every visitor sees that one.

The tile can be a square, a rounded square, or a circle. A transparent background drops the tile altogether, which suits an emoji more than a letter: a dark letter on nothing vanishes in a dark tab strip.

Transparent or filled#

A transparent background lets the browser chrome show through, which looks right in both a light and a dark tab strip as long as the mark itself has contrast against both. A dark logo on transparency disappears in dark mode, and that is the usual reason a favicon looks broken for half the people who visit.

Filling the background solves it by making the icon a small tile of its own, which is what most large sites do. It is also what Apple expects: the home screen icon is drawn on a rounded square, and a transparent one comes out black on most phones.

Where the files go#

Put them all in the root of your site, so /favicon.ico resolves. Browsers ask for that path whether or not you link to it, and something answering it is what stops a 404 appearing in your logs on every first visit.

The markup at the bottom points at the ones a page declares. The 192 and 512 pixel files are not linked from the page at all: they are listed in site.webmanifest, the web app manifest, which the markup links and an Android install prompt reads.

The manifest lists those two icons, your site name if you gave one, the tile colour as the theme colour, and standalone display, which opens an installed shortcut without the browser bar. It leaves out anything it would have to guess, such as a start page. If your site already has a manifest, copy the icons list into yours rather than replacing it.