Favicon

the small picture a browser shows beside a page

What it is

A favicon is the icon a website names as its own, so that the browser can put it in the tab, in the address bar, beside a bookmark and in the history list. The word is short for “favorites icon”, after the bookmarks menu of Internet Explorer, the first browser that went looking for one. People also say site icon or tab icon, and the plural is favicons. In HTML it is declared with a link element whose rel is icon; older markup writes shortcut icon, a spelling the standard still accepts for historical reasons.

A page may declare several of them at once, each with a type, a sizes value and an optional media query, and the browser chooses the one that suits the place it is drawing. The sizes are written in device pixels, so 32x32 means thirty-two physical dots, and the keyword any is reserved for a scalable format such as SVG. When two candidates are equally suitable, the one declared last wins. When a page declares none, a browser fetching it over HTTP or HTTPS may ask for /favicon.ico at the root of the host anyway: a habit from the late 1990s that the HTML standard now writes down as permitted behaviour.

The .ico file behind that habit is a container rather than a single picture. One file can hold several bitmaps at different sizes, and the browser takes the frame that fits; its registered media type is image/vnd.microsoft.icon. Today PNG and SVG are the usual alternatives, and any format the browser decodes is allowed in principle: one of this site’s own pages declares a WebP.

The favicon is the smallest member of a family that is easy to blur together. Apple’s home-screen icon, the apple-touch-icon, is a separate PNG that iOS looks for under its own name. An installed web app usually takes its icons from the web app manifest, including a “maskable” variant drawn with a safe margin so the platform can crop it to a circle or a rounded square. The large picture a chat app shows when someone pastes a link is a share image, set by different markup altogether, and no browser uses it in a tab.

Why it matters

The decision a team actually faces is how many icon files to ship, from what source, and who keeps them in step. It looks like a design detail. In practice it is a small piece of infrastructure that touches every platform the site appears on.

Recognition is the part a buyer sees first. At sixteen CSS pixels in a strip of twenty tabs, the favicon is the only piece of the brand a reader looks at while they are working somewhere else, and a generic page glyph in that slot reads as a site nobody finished. The same icon labels the bookmark, the history entry and, on several search engines, the result itself.

Cost and correctness are the part an engineer sees. Each surface has its own convention: an ICO or PNG for the tab, a 180-pixel PNG for Apple’s home screen, a set of square PNGs listed in the manifest for installs, and a dark tab strip on which a dark mark disappears. The quick route is a favicon generator that writes thirty files and a block of markup to paste. It works, but pasted markup carries pasted claims, and a sizes value describing somebody else’s files is wrong from the first day.

Caching is the part nobody plans for. Browsers keep icons far longer than pages, and the standard explicitly does not require them to refresh an icon when the list of declared icons changes. A rebrand therefore reaches returning visitors on the browser’s schedule rather than the site’s. The root guess has a cost of its own: every first visit asks for /favicon.ico, so a site without one writes a 404 into its logs for each new reader, and a site behind a login may answer that guess with a password prompt.

So which format? An SVG is one small file that scales to any size and can switch colours with prefers-color-scheme. A detailed drawing, by contrast, survives better as a raster, with the ICO kept for software that reads nothing else. Most sites need both a favicon and an apple-touch icon, because each platform reads only its own.

What it looks like in practice

This site’s icons come from drawings rather than from a generator. The visual identity was built from two hand-made drawings, and scripts produce everything derived from them: the favicon set in its required sizes, the touch icons and the launch images at each device size. Generation is a task anyone can run. A staleness check compares the commit date of every derived asset with that of its source and fails when a derived file was committed first, and derived files are never edited by hand. The page names the price: a hard dependency on the generation toolchain.

The credits page names the tools in that toolchain: Python, driving ImageMagick, generating the icon set from a drawing of the mark.

The site’s own templates show the choices that followed. Each page declares a 180-pixel PNG and a three-frame ICO holding 16, 32 and 48 pixels. The tab mark used to be a bold cog, on the theory that a simple silhouette survives sixteen pixels better than a detailed drawing; rendered side by side over a light tab strip and a dark one, the detailed drawing held up and the cog did not, so the tab now shows a raster render of the brain drawing that is the company’s mark. The manifest lists the same two root files, and its icon set is read off disk from the folders the generator writes, with each size taken from the file name, so a new size appears in the list without anybody typing it.

Where it goes wrong

The old icon survives a rebrand. The site ships a new file under the same name and returning visitors keep seeing the old mark for weeks, because the browser keeps its own copy and owes the page no refresh. Publish the new icon under a new file name, update the link elements, and treat the root /favicon.ico as a fallback that changes last.

The declared sizes describe a different file. Markup copied from an example lists sizes the file never held, and the browser picks a candidate on a false claim and scales the wrong frame. This site’s manifest once said its ICO held seven frames when the generator wrote three, and listed an SVG with three pixel sizes, which a vector file does not have. Write sizes from the file itself, or derive it from the generator’s output.

A guessed path returns something other than an icon. iOS asks for /apple-touch-icon.png at the root of a host when a page declares no Apple icon, and browsers do the same for /favicon.ico. On a host where unknown paths fall through to another application, the guess gets a redirect, a login page or, on one of this site’s pages served from a second host, a 401. Declaring the icon explicitly turns the guess into a request for a file that exists.

The mark disappears on a dark tab strip. A black logo on a transparent background vanishes when the browser draws its tabs in dark grey. Render the icon over both a light and a dark strip before choosing it, and give an SVG favicon a prefers-color-scheme rule or the raster a background of its own.

The detail turns to mud at sixteen pixels. A full logo with a wordmark scaled to a tab slot becomes a smudge. Test the real size on a real tab rather than the design file at 800%, and pick the part of the mark that still reads there.

Further reading

Glossary