HTML site icon: identify a document in browser UI

Use it in a concrete workflow

A dispatch console has a small mark that should remain recognizable beside many open tabs. The head points to a same-site icon asset, while the title carries the precise record identity because a tiny image cannot communicate a queue number. Keep the asset stable and test it on light and dark browser chrome. An icon is branding, not an accessible replacement for the document title or the main heading.

<head>
  <meta charset="utf-8">
  <title>Dispatch queue — depot west</title>
  <link rel="icon" href="/assets/depot-mark.svg" type="image/svg+xml">
</head>

Behavior and ownership

The file must be deployed at the specified local path and served with the expected media type. Browsers may cache icons aggressively, so a changed file can appear stale until its URL or cache state changes.

Performance and maintenance

A compact icon adds one small request that may be cached across pages. A huge source image wastes bytes and may still look poor when reduced to tab size.

Common Mistakes

• Do not depend on an icon to name the page.
• Do not point to an asset absent from deployment.
• Do not assume a browser instantly refreshes a cached icon.

Connected lessons

• HTML title and metadata: distinguish document identity from page copy
• HTML resource hints: preload only a known critical asset
• HTML image alt text: describe function or information, not pixels alone