Как добавить иконку сайта (favicon)

Короткий ответ

Добавьте в <head> тег <link> с rel="icon":

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

Иконка показывается на вкладке, в закладках и в истории. В живом примере её не видно — она относится ко всей странице.

Какие файлы нужны

Обычно хватает трёх строк:

<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 — для старых браузеров и программ, которые сами ищут файл в корне сайта;
• favicon.svg — чёткая на любом экране векторная иконка;
• apple-touch-icon.png размером 180×180 — для значка на экране iPhone.

Иконка под тёмную тему

Внутри SVG можно использовать медиазапрос prefers-color-scheme, и иконка поменяет цвет вместе с темой браузера. С PNG и ICO так не получится.

Частая ошибка

Заменили файл иконки, а в браузере осталась старая. Браузеры кешируют favicon очень надолго. Добавьте к адресу версию — href="/favicon.svg?v=2" — или откройте страницу в приватном окне, чтобы проверить новую.