How to add a site icon (favicon)

Short answer

Add a <link> tag with rel="icon" to <head>:

<head>
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
</head>
<p>The icon appears on the browser tab.</p>

The icon is shown on the tab, in bookmarks and in history. It is not visible in the live example — it belongs to the whole page.

Which files are needed

Three lines are usually enough:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<p>Three files cover all browsers.</p>

• favicon.ico — for old browsers and programs that look for the file in the site root on their own;
• favicon.svg — a vector icon that is sharp on any screen;
• apple-touch-icon.png sized 180×180 — for the icon on an iPhone home screen.

An icon for the dark theme

Inside an SVG you can use the prefers-color-scheme media query, and the icon changes color together with the browser theme. PNG and ICO cannot do that.

Common mistake

The icon file was replaced, but the browser still shows the old one. Browsers cache the favicon for a very long time. Add a version to the address — href="/favicon.svg?v=2" — or open the page in a private window to check the new one.