Notes and workMalta · 8 October 2026
Carlos Filipe

Websites · Debugging

A favicon is not a link tag

One of my sites showed the browser’s default globe in its tab. The favicon tag was right there in the page.

Carlos Filipe2 min readMalta

The symptom

The page had a <link rel="icon"> in its head, pointing to an inline SVG. Every check that looked for the tag passed. The tab still showed the globe.

The cause

The SVG was written straight into a data URI, colours and all: fill='#0F0F13'. In a URL, # starts the fragment. The browser read the image up to the first colour, got half an SVG, and gave up.

The fix

  • Serve real files from the site root: /favicon.ico, /favicon.svg and /apple-touch-icon.png. Browsers ask for /favicon.ico on their own, tag or no tag, so it should answer 200.
  • If you keep an inline SVG, encode every # as %23, and < and > as %3C and %3E.

The check that would have caught it

Finding the tag proves nothing. Load the page in a headless browser, take the href of every rel="icon", load it as an image and check that its naturalWidth is greater than zero. Then request /favicon.ico and expect a 200. Both checks now run on every page I ship.