Favicon

Why It Matters

With no favicon the browser shows a blank sheet of paper, and with twenty tabs open that is the difference between someone finding your site again and closing it. A missing icon also reads as unfinished, which matters most on a page asking a stranger for an email address. There is a practical cost: browsers request '/favicon.ico' regardless, so a site without one collects a steady trickle of 404s in its logs and makes real errors harder to spot. On mobile, the touch icon is what appears when someone adds the site to their home screen, at 180 by 180 with no room for detail. A logo that reads at 32 pixels is a different drawing from one that reads on a poster.

How It Works

The browser parses the head of the document looking for link elements whose rel is 'icon', 'shortcut icon' or 'apple-touch-icon', each with an href and usually a sizes and type attribute. It picks the best match for the context — 32 pixels for a tab on a standard display, 180 for an iOS home screen — and fetches that file over the same connection as the rest of the page. If no link tag is present it falls back to requesting '/favicon.ico' at the root. Hosts commonly send a long Cache-Control lifetime for icons, and browsers cache them harder still, which is why a changed favicon can take days to appear; adding a version query such as 'favicon.svg?v=2' forces a fresh fetch.

Real-World Example

Common Mistakes

• ✕Uploading a 512 pixel logo and letting the browser shrink it — fine detail turns to mush at 16 pixels and the icon becomes an unreadable smudge
• ✕Changing the icon and assuming it is broken when the old one persists — browsers cache icons aggressively, so a version query or a new filename is needed to see the change
• ✕Declaring the icon with a path relative to the page — it resolves correctly on the home page and fails on every page in a subdirectory

Related Terms