Исполняемые доки HTML: Favicon

Q: Как добавить favicon в HTML?

Положите файл иконки на сайт и добавьте (или путь к PNG либо SVG) внутрь . Тогда браузеры покажут его на вкладке, в закладках и в истории.

Q: Какого размера должен быть favicon?

Нужен favicon.ico (или PNG) 32×32 для вкладок, SVG, который масштабируется до любого размера, и PNG apple-touch-icon 180×180 для главного экрана iPhone. Веб-приложения с манифестом также указывают PNG 192×192 и 512×512.

Q: Почему не отображается favicon?

Обычные причины: неправильный путь в href, стоит вне или браузер все еще показывает старую иконку из кэша. Откройте URL иконки напрямую, чтобы проверить путь, затем перезагрузите страницу с очисткой кэша или добавьте к URL версию, например ?v=2.

Q: Можно ли использовать SVG или PNG как favicon?

Да. Используйте или . SVG работает в Chrome, Edge и Firefox; оставьте также ICO или PNG для браузеров без его поддержки.

Q: Нужен ли rel="shortcut icon"?

Нет. rel="icon" это стандартное значение. Слово shortcut осталось от старого Internet Explorer и в современных браузерах ничего не делает.

Q: Можно ли использовать эмодзи как favicon?

Да, если обернуть его в SVG: data URI с SVG, где элемент содержит эмодзи. Это удобно для прототипов, но эмодзи выглядит по-разному в каждой операционной системе.

Как добавить favicon

Сохраните иконку на сайте и укажите на нее тегом <link rel="icon"> в <head>:

<link rel="icon" href="/favicon.ico">

Для простого сайта это весь ответ. href может указывать на файл .ico, .png или .svg. Пример ниже использует SVG, записанный прямо в href как data URI, поэтому отдельный файл не нужен. Превью внутри другой страницы не может изменить вкладку вашего браузера, поэтому скрипт рисует ту же иконку на имитации вкладки и в трех размерах:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bake Club</title>
  <link rel="icon" type="image/svg+xml"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%232563eb'/%3E%3Ctext x='16' y='23' font-size='20' font-family='Arial' font-weight='700' fill='white' text-anchor='middle'%3EB%3C/text%3E%3C/svg%3E">
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .bar { background: #e5e7eb; padding: 8px 8px 0; border-radius: 8px 8px 0 0; }
    .tab { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 8px 8px 0 0; padding: 8px 14px; font-size: 13px; }
    .sizes { display: flex; align-items: end; gap: 16px; margin-top: 16px; font-size: 12px; color: #6b7280; }
    .sizes div { text-align: center; }
  </style>
</head>
<body>
  <div class="bar"><div class="tab"><img id="tab-icon" width="16" height="16" alt=""><span id="tab-title"></span></div></div>
  <div class="sizes" id="sizes"></div>
  <script>
    const href = document.querySelector('link[rel="icon"]').href;
    document.getElementById('tab-icon').src = href;
    document.getElementById('tab-title').textContent = document.title;
    for (const size of [16, 32, 64]) {
      const box = document.createElement('div');
      box.innerHTML = '<img width="' + size + '" height="' + size + '" alt=""><br>' + size + 'px';
      box.querySelector('img').src = href;
      document.getElementById('sizes').append(box);
    }
  </script>
</body>
</html>

В 16 пикселях помещается одна жирная буква или простая фигура, а мелкие детали пропадают. Проектируйте иконку сначала под самый маленький размер. Замените fill='%232563eb' на другой цвет (%23 это #, закодированный для URL), и обновятся все копии.

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

Браузеры, телефоны и лаунчеры приложений ищут разные иконки. Небольшой набор покрывает их все:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

Файл	Размер	Для чего
`favicon.ico`	32×32	Вкладки браузера и инструменты, которые ищут только `/favicon.ico`
`icon.svg`	Любой (вектор)	Четкие вкладки при любой плотности экрана в Chrome, Edge и Firefox
`apple-touch-icon.png`	180×180	Иконка, когда сайт добавляют на главный экран iPhone или iPad
Иконки манифеста	PNG 192×192 и 512×512	Главный экран Android и установленные веб-приложения

Большинство браузеров также сами запрашивают /favicon.ico из корня сайта, если на странице нет ссылки на иконку, поэтому favicon.ico в корне это полезное значение по умолчанию. Атрибут sizes сообщает браузеру размер каждого файла, чтобы он мог выбрать самый подходящий. Используйте rel="icon"; старый rel="shortcut icon" работает только потому, что браузеры игнорируют лишнее слово.

Favicon из эмодзи

Для прототипа или личной страницы эмодзи быстро превращается в favicon. Поместите его внутрь элемента SVG <text>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Emoji favicon</title>
  <link rel="icon"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E%F0%9F%8D%AA%3C/text%3E%3C/svg%3E">
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>The icon at tab size and larger:</p>
  <img id="a" width="16" height="16" alt="">
  <img id="b" width="48" height="48" alt="">
  <script>
    const href = document.querySelector('link[rel="icon"]').href;
    document.getElementById('a').src = href;
    document.getElementById('b').src = href;
  </script>
</body>
</html>

%F0%9F%8D%AA это эмодзи печенья, закодированное для URL. Эмодзи рисует шрифт эмодзи операционной системы, поэтому в Windows, macOS и Android он выглядит по-разному, и для настоящего продукта лучше нарисованная иконка.

Иконка, которая следует темной теме

SVG favicon может нести собственный CSS, включая медиазапрос prefers-color-scheme, поэтому темная иконка может становиться светлой, когда браузер использует темную тему:

<!-- icon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    circle { fill: #111827; }
    @media (prefers-color-scheme: dark) { circle { fill: #f9fafb; } }
  </style>
  <circle cx="16" cy="16" r="14"/>
</svg>

Смена favicon через JavaScript

Сайты меняют favicon, чтобы показать точку уведомления или цвет статуса. Нарисуйте новую иконку на <canvas> и присвойте href ссылки изображение с canvas:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dynamic favicon</title>
  <link rel="icon" id="icon" href="data:,">
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 6px 12px; margin-inline-end: 6px; }
    img { vertical-align: middle; margin-inline-start: 8px; }
  </style>
</head>
<body>
  <button id="on">New message</button>
  <button id="off">Clear</button>
  Current icon: <img id="preview" width="32" height="32" alt="">
  <script>
    function draw(withDot) {
      const canvas = document.createElement('canvas');
      canvas.width = canvas.height = 32;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = '#2563eb';
      ctx.fillRect(2, 2, 28, 28);
      if (withDot) {
        ctx.fillStyle = '#dc2626';
        ctx.beginPath();
        ctx.arc(24, 8, 7, 0, Math.PI * 2);
        ctx.fill();
      }
      const url = canvas.toDataURL('image/png');
      document.getElementById('icon').href = url;
      document.getElementById('preview').src = url;
    }
    document.getElementById('on').onclick = () => draw(true);
    document.getElementById('off').onclick = () => draw(false);
    draw(false);
  </script>
</body>
</html>

На настоящей странице в Chrome или Firefox иконка вкладки меняется каждый раз, когда задается href, в тот же момент, когда здесь меняется картинка превью.

Частые ошибки

Неправильный путь. href="favicon.ico" указывается относительно текущей страницы, поэтому ломается на /blog/post. Используйте путь от корня: href="/favicon.ico".
Ожидание, что обновление появится сразу. Браузеры сильно кэшируют favicon. Перезагрузите страницу с очисткой кэша или поменяйте URL (/favicon.ico?v=2), когда заменяете иконку.
Детальный логотип, уменьшенный до 16 пикселей. Упростите его: одна буква или одна фигура с сильным контрастом.
Только SVG. Оставьте также ICO или PNG для браузеров без поддержки SVG favicon и добавьте apple-touch-icon для iOS.
Ссылка в <body>. Держите ее в <head> вместе с тегом title и другими метаданными.

Часто задаваемые вопросы

Как добавить favicon в HTML?

Положите файл иконки на сайт и добавьте <link rel="icon" href="/favicon.ico"> (или путь к PNG либо SVG) внутрь <head>. Тогда браузеры покажут его на вкладке, в закладках и в истории.

Какого размера должен быть favicon?

Нужен favicon.ico (или PNG) 32×32 для вкладок, SVG, который масштабируется до любого размера, и PNG apple-touch-icon 180×180 для главного экрана iPhone. Веб-приложения с манифестом также указывают PNG 192×192 и 512×512.

Почему не отображается favicon?

Обычные причины: неправильный путь в href, <link> стоит вне <head> или браузер все еще показывает старую иконку из кэша. Откройте URL иконки напрямую, чтобы проверить путь, затем перезагрузите страницу с очисткой кэша или добавьте к URL версию, например ?v=2.

Можно ли использовать SVG или PNG как favicon?

Да. Используйте <link rel="icon" href="/icon.svg" type="image/svg+xml"> или <link rel="icon" href="/icon.png" type="image/png">. SVG работает в Chrome, Edge и Firefox; оставьте также ICO или PNG для браузеров без его поддержки.

Нужен ли rel="shortcut icon"?

Нет. rel="icon" это стандартное значение. Слово shortcut осталось от старого Internet Explorer и в современных браузерах ничего не делает.

Можно ли использовать эмодзи как favicon?

Да, если обернуть его в SVG: data URI с SVG, где элемент <text> содержит эмодзи. Это удобно для прототипов, но эмодзи выглядит по-разному в каждой операционной системе.

Связанные концепции