# Favicon ## 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](/portfolio/built-the-visual-identity-from-two-drawings-164/), 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](/credits/) 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 - [HTML Standard: link type “icon”](https://html.spec.whatwg.org/multipage/links.html#rel-icon) — how a browser chooses among declared icons, what `sizes` means and when it may fetch `/favicon.ico` by itself. - [IANA: image/vnd.microsoft.icon](https://www.iana.org/assignments/media-types/image/vnd.microsoft.icon) — the registration of the ICO media type. - [Image Resource](https://www.w3.org/TR/image-resource/) — the W3C definition of an icon with `src`, `sizes` and `type` that manifests reuse. - [Apple: Configuring Web Applications](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html) — the `apple-touch-icon` convention and the root lookup iOS falls back on.