You notice a favicon most when it is missing. With fifteen tabs open, familiar icons become tiny landmarks; the generic globe is the tab you have to read twice. That little image is not decoration alone—it is part of how a site remains recognizable when its title is shortened, hidden, or surrounded by other pages.

Why the tiny icon matters

  • Tab recognition: an icon remains visible when the page title is truncated by a crowded tab strip.

  • Bookmark and history scanning: repeated visual identity helps a saved page stand apart from neighboring entries.

  • Brand continuity: the same core mark can connect the browser tab, website, and installed web experience.

  • Perceived completeness: a generic fallback often makes an otherwise finished site feel unfinished.

A favicon is not a security indicator. Attackers can imitate an icon, and browsers do not use it to prove ownership or authenticity. Domain name, certificate validation, and trustworthy application behavior remain separate concerns.

How a page points the browser to its icon

The standards-based mechanism is a <link> element with rel="icon" in the document <head>. When several icon links exist, the browser can consider attributes such as media, type, and sizes, then choose a resource appropriate to its current surface.

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

A layered example: keep only the resources your project actually generates and tests.

What each declaration contributes

  • rel="icon" identifies a resource representing the current document in browser UI.

  • type gives the image MIME type so a browser can prefer a format it supports.

  • sizes="32x32" describes an intrinsic raster size; it does not resize an incorrectly sized file.

  • sizes="any" is appropriate for a scalable icon such as SVG or, in this compatibility pattern, a multi-image ICO.

  • apple-touch-icon is a non-standard but widely used declaration for Apple home-screen/Web Clip behavior.

  • rel="manifest" points to web-app metadata whose icons serve installed-app surfaces, not merely browser tabs.

The HTML `rel` reference notes that browsers use declared media, type, and size information when selecting among multiple icon links. The old shortcut icon wording is non-conforming; use rel="icon".

ICO, PNG, and SVG solve slightly different compatibility problems

  • ICO: a durable fallback with broad historical support and the ability to contain multiple raster sizes.

  • PNG: predictable lossless pixels and alpha transparency; useful for explicit raster sizes.

  • SVG: scalable and compact for simple vector artwork, with modern-browser support but a raster fallback still prudent for a broad compatibility target.

There is no universal rule that every site must ship every historical size. A pragmatic website set can include a root ICO fallback, a tested modern icon, and platform-specific assets only where the product supports those surfaces. Installed PWAs have larger icon requirements than an ordinary browser tab.

A favicon is not the same thing as a PWA icon

A browser tab icon is tiny and often square. An installed web app can appear on a home screen, launcher, task switcher, or splash screen, where the operating system needs larger assets and may crop them into different shapes. Those icons belong in the web app manifest.

site.webmanifestjson
{
  "name": "Example Engineering Notes",
  "short_name": "Notes",
  "icons": [
    {
      "src": "/icons/app-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/icons/app-512.png",
      "type": "image/png",
      "sizes": "512x512"
    },
    {
      "src": "/icons/app-512-maskable.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "maskable"
    }
  ]
}

Illustrative PWA icon metadata; use paths and assets generated for your own application.

What the manifest example communicates

  • name and short_name identify the installed application where different amounts of space are available.

  • Each icons entry declares a source, MIME type, and real intrinsic dimensions.

  • The 192px and 512px PNGs cover common Chromium installability expectations, not favicon-tab requirements.

  • purpose: "maskable" permits supported systems to crop the specially padded asset into adaptive shapes.

  • A maskable source needs artwork inside its safe zone; relabeling an edge-to-edge logo does not make it safe to crop.

Current web app manifest guidance describes 192×192 and 512×512 Chromium icon expectations and explains maskable icons. Treat this as an installed-web-app concern rather than stuffing large files into every page as tab icons.

  • Use one recognizable silhouette or letterform rather than the full logo lockup.

  • Remove fine text and hairline detail that collapses at small sizes.

  • Check the icon against both light and dark browser chrome.

  • Leave enough edge space for platform masks and rounded treatments.

  • Export raster assets at their intended dimensions instead of depending on one tiny source to scale upward.

  • Preview at actual size; a beautiful 512px canvas can become an indistinct 16px smudge.

Place files where their URLs really resolve

Root-relative paths such as /icon.svg resolve from the origin root, regardless of the current page path. Relative paths such as icons/icon.svg resolve against the document base URL. Root-relative paths are often easier for a site-wide icon set, but applications deployed beneath a subpath need their public base path handled correctly.

Serving /favicon.ico remains a useful fallback because browsers and other clients commonly request it even without markup. It does not replace explicit declarations when you need multiple formats, sizes, themes, or installable-app icons.

Why a new favicon keeps showing the old picture

Favicons are cached aggressively and sometimes separately from ordinary page resources. A successful 200 response for the new file does not guarantee every open tab, bookmark database, CDN edge, or browser profile has discarded the previous icon.

  1. Open the icon URL directly and verify its status, content type, dimensions, and visible artwork.

  2. Inspect the rendered <head> and confirm the intended href rather than the CMS setting alone.

  3. Check the network panel for 404 responses, redirects, CSP blocks, or an unexpected MIME type.

  4. Purge the relevant CDN or application cache after replacing an asset at the same URL.

  5. Test in a fresh browser profile or private window, understanding that bookmark caches can behave differently.

  6. For a controlled release, publish a versioned filename and update the declaration instead of relying only on cache clearing.

Common icon failures have mundane causes

A generic globe remains

The URL may be wrong, blocked, redirected to HTML, or served with an unusable format. Request the icon directly, verify the response, and inspect the actual page head.

The icon looks blurry

The browser may be scaling a low-resolution raster or the design may contain detail too fine for its display size. Provide a suitable source and inspect the artwork at real tab dimensions.

The icon disappears in dark mode

Transparent dark artwork can vanish against dark browser chrome. Adjust the asset’s contrast or provide a tested media-specific alternative where supported, while retaining a broadly compatible fallback.

The tab icon works, but the installed app icon is wrong

Inspect the web app manifest and the assets installed from it. An operating system may retain the icon captured at installation time, so update testing can require removing and reinstalling the app.

The best favicon quietly earns its place

A favicon succeeds when nobody has to think about it: the tab is easy to find, bookmarks remain recognizable, and supported install surfaces receive appropriate artwork. Give browsers clear declarations, give platforms correctly sized assets, and give caches an intentional update path.

Build the asset next