Favicon (site icon)

Definition

A favicon is the small icon a browser associates with your site: in the tab, the bookmark list, the history view, and on some platforms the home screen. It is declared in the document head with a link element whose rel is icon.

<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/favicon.ico" sizes="32x32" />

How browsers find it

Browsers use the declared link when one exists. When none does, most fall back to requesting /favicon.ico from the site root, which is why that exact path keeps working decades after it stopped being required. Declaring the icon explicitly is still better: it lets you serve a modern format, control caching, and avoid a stray 404 in the logs on every first visit.

Formats and sizes, practically

An SVG icon scales to every context from one file and supports dark-scheme styling, but is not recognized everywhere. The pragmatic setup for a small site is one SVG plus one small ICO or PNG fallback, and, if mobile bookmarking matters, a 180-pixel apple-touch-icon. Generating a dozen sizes for every conceivable platform is rarely worth the maintenance; add a size when a real context demands it.

What it affects

Nothing about the favicon changes how a page ranks. What it changes is recognition: a tab with an icon is findable among twenty open tabs, a bookmark with an icon gets re-clicked, and search results and history views that show icons make the site look finished rather than provisional. It is a small trust signal delivered everywhere your URL appears.

Common failures

• No icon at all, so the browser shows a generic placeholder and the log collects /favicon.ico 404s.
• An icon that reads well at full size and becomes an unreadable smudge at 16 pixels; favicons need to be designed at the size they are shown.
• A stale icon cached long after a rebrand, because icon caching is aggressive; changing the filename beats waiting.
• The icon declared on some templates and missed on others, so the tab flickers identity between pages.

Review question

Open the deployed site in a fresh private window and look at the tab, then bookmark the page and check the bookmark. If either shows a generic placeholder, the declaration is missing, misspelled, or unreachable — and the network log will say which.