Favicons and App Icons

Concept

A favicon is the small image beside a page title in a browser tab, a bookmark, a history entry and the address bar. It is the only visual identity a site has when it is one of twenty open tabs, which makes it worth more than the two lines it takes.

The topic has a reputation for being messy, because for years every platform wanted a different file at a different size. The current answer is much shorter.

The modern minimum

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Four lines and four files, and that covers every current browser and platform.

The SVG favicon

One file at every size, usually under a kilobyte, and it can respond to the reader colour scheme - something no raster icon can do:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .mark { fill: #1e3a8a; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #93c5fd; }
    }
  </style>
  <rect class="mark" x="4" y="4" width="24" height="24" rx="6"/>
</svg>

A dark blue mark on a light browser interface, a light blue one on a dark interface, from a single file.

Why favicon.ico is still there

Browsers request /favicon.ico from the site root automatically, whether or not a link tag exists. Not having the file produces a 404 in the server log on every fresh visit. Keeping one at the root is the simplest way to stop that.

The ICO format can hold several sizes in one file, which is why 16 by 16 and 32 by 32 are usually packed together.

The web app manifest

<link rel="manifest" href="/site.webmanifest">

{
  "name": "Riverside College",
  "short_name": "Riverside",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icons/icon-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#1e3a8a",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/"
}

The maskable icon deserves a note. Android crops home screen icons to whatever shape the launcher uses - a circle, a rounded square, a squircle. A maskable icon is designed with the artwork inside the middle eighty percent so that any crop still looks right. Without one, a logo can be cropped through its own edges.

Design rules

• Simplify. At sixteen pixels a detailed logo is a smudge. Use a single letter, a monogram, or the simplest shape from the brand.
• High contrast. It sits against light and dark browser interfaces.
• Keep it square, with the mark centred.
• Test at real size. Zoom a browser tab to see what a reader actually gets.
• Do not use a photograph. Nothing photographic survives sixteen pixels.

Other icon links

<!-- a specific size -->
<link rel="icon" type="image/png" sizes="96x96" href="/icons/icon-96.png">

<!-- pinned tab in Safari, a single colour SVG -->
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#1e3a8a">

<!-- Windows tiles, largely historical -->
<meta name="msapplication-TileColor" content="#1e3a8a">
<meta name="msapplication-config" content="/browserconfig.xml">

The long lists of icon links found in older templates are mostly obsolete. The four line set above is enough.

Caching

Favicons are cached aggressively, sometimes beyond a normal cache clear. After changing one, a hard reload may not be enough - the reliable way to check is a private window or a query string on the URL:

<link rel="icon" href="/favicon.svg?v=2" type="image/svg+xml">

Important rules

• The browser requests /favicon.ico from the root whether you link it or not.
• Link tags may point anywhere; the root file is a fallback.
• SVG favicons are supported by current browsers and ignored by older ones, which fall back to the ICO.
• The Apple touch icon should be 180 by 180 with no transparency; iOS renders transparent areas as black.
• Android icons come from the manifest, not from link tags.
• Favicons are cached hard.

Common mistakes

• No favicon at all, so every tab shows a generic placeholder and the log fills with 404s.
• Using a full logo, unreadable at sixteen pixels.
• A transparent Apple touch icon, rendered on black.
• Copying a twenty line icon block from a generator without knowing what any of it does.
• No maskable icon, so Android crops through the artwork.
• Assuming a changed favicon appears immediately.
• An icon that vanishes against a dark browser interface.

Best practices

• Ship the four line set: ICO, SVG, Apple touch icon, manifest.
• Design a simplified mark specifically for small sizes.
• Use the dark mode media query inside the SVG.
• Include a maskable icon in the manifest.
• Keep favicon.ico at the site root.
• Add a version query string when replacing one.
• Check the result in a private window on both a light and a dark interface.

Practice

1. Create an SVG favicon that changes colour in dark mode and confirm it in both schemes.
2. Write a manifest with three icon entries including a maskable one.
3. Take a detailed logo, simplify it to something legible at sixteen pixels, and compare the two in a tab.
4. Change a favicon and try to see the change without a private window. What did it take?