Как добавить фавикон в HTML (и какие теги rel использовать)
Правильные теги link, правильное размещение и как исправить фавиконы, которые отказываются появляться
Создать фавиконДобавление фавикона на ваш веб-сайт должно быть одной из самых простых задач в веб-разработке, но оно спотыкает разработчиков чаще, чем вы могли бы ожидать. Между противоречивыми советами о том, какие теги <link> использовать, запутанными значениями атрибута rel и браузерами, которые упорно кешируют старую иконку, заставить фавикон фактически появиться может показаться игрой в угадывание.
Правда в том, что настройка фавикона для большинства веб-сайтов может быть сведена к одному файлу и одному HTML-тегу. Это руководство прорезает шум и дает вам именно то, что вам нужно: минимальную практическую настройку, наиболее полезные вариации тега rel и четкие инструкции по борьбе с проблемами кеширования, которые делают ваш новый фавикон невидимым.
Если у вас еще нет файла favicon.ico, создайте его с Any2ICO менее чем за минуту. Он принимает PNG, SVG, JPG, WebP и другие форматы и создает многоразмерный файл ICO, который работает везде. Затем вернитесь сюда, чтобы подключить его к вашему HTML.
Самая простая настройка фавикона
Перед погружением в вариации тегов и пограничные случаи, вот подход, который работает для подавляющего большинства веб-сайтов. Он требует одного файла и одной строки HTML.
Поместите favicon.ico в корень вашего домена. Загрузите или разверните ваш файл favicon.ico так, чтобы он был доступен по адресу https://yourdomain.com/favicon.ico. Это путь, который браузеры проверяют по умолчанию с конца 1990-х годов. Даже без каких-либо HTML-тегов, указывающих на него, большинство браузеров найдут и отобразят фавикон в этом месте автоматически. Эта конвенция встроена в поведение браузера и никуда не денется.
Добавьте один тег link в ваш HTML head. Хотя конвенция корневого пути работает сама по себе, добавление явного тега устраняет всю неоднозначность и обеспечивает последовательное поведение в браузерах, поддоменах и одностраничных приложениях, где корень документа может не сопоставляться напрямую с корнем сервера.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Заголовок вашей страницы</title>
<link rel="icon" href="/ru/favicon.ico" sizes="any">
</head>
<body>
<!-- ваш контент -->
</body>
</html>Этого единственного тега <link> достаточно для каждого основного браузера: Chrome, Firefox, Safari, Edge и даже устаревших версий Internet Explorer. Атрибут sizes="any" сообщает браузеру, что файл ICO содержит несколько разрешений, и он должен выбрать наиболее подходящее для текущего контекста, будь то иконка вкладки 16x16 или иконка закладки 32x32.
Это настройка, которую мы рекомендуем для большинства веб-сайтов. Она проста, надежна и универсально поддерживается. Вы можете остановиться здесь, и ваш фавикон будет работать правильно практически в каждом сценарии.
Распространенные теги rel фавикона и когда их использовать
Если вы ищете "HTML-теги фавикона" онлайн, вы найдете десятки вариаций с разными значениями rel, атрибутами type и объявлениями sizes. Большинство из них были созданы для конкретных пограничных случаев или исторических причуд браузера. Вот практическая разбивка тегов, которые вы наиболее вероятно встретите, и когда каждый действительно полезен.
| Тег | Цель | Требуется? |
|---|---|---|
<link rel="icon" href="/ru/favicon.ico" sizes="any"> | Основное объявление фавикона. Указывает браузерам на ваш многоразмерный файл ICO. | Да (рекомендуется) |
<link rel="icon" type="image/png" href="/ru/icon-32.png" sizes="32x32"> | Предоставляет фавикон PNG определенного размера. Некоторые современные браузеры предпочитают PNG вместо ICO. | Нет (дополнительное улучшение) |
<link rel="icon" type="image/svg+xml" href="/ru/icon.svg"> | Фавикон SVG, который идеально масштабируется до любого размера. Поддерживается в Chrome, Firefox и Edge. | Нет (дополнительно, не универсально) |
<link rel="apple-touch-icon" href="/ru/apple-touch-icon.png"> | Иконка для закладок главного экрана iOS. Устройства Apple используют это, когда пользователи добавляют ваш сайт на главный экран. | Нет (только если ориентация на iOS) |
<link rel="shortcut icon" href="/ru/favicon.ico"> | Устаревший синтаксис. Ключевое слово shortcut нестандартно и игнорируется современными браузерами. | Нет (устарело) |
Атрибут type указывает MIME-тип файла иконки. Для файлов ICO вы можете опустить его полностью, потому что браузеры автоматически определяют формат ICO. Для фавиконов PNG используйте type="image/png". Для SVG используйте type="image/svg+xml".
Атрибут sizes сообщает браузеру, какие размеры предоставляет иконка. Для многоразмерного файла ICO sizes="any" — самый чистый подход. Для одноразмерных файлов PNG укажите точные размеры, например sizes="32x32". Если вы предоставляете несколько тегов иконок с разными размерами, браузер выберет тот, который ближе всего к тому, что ему нужно.
На практике первая строка этой таблицы — всё, что нужно большинству сайтов. Добавьте строку apple-touch-icon, если вы заботитесь о внешнем виде главного экрана iOS. Строки PNG и SVG — дополнительные улучшения для разработчиков, которые хотят детального контроля над доставкой иконок.
Кеширование и "фавикон не отображается"
Вы развернули ваш новый фавикон, обновили страницу, и старая иконка все еще смотрит на вас из вкладки браузера. Это не ошибка в вашем коде. Это почти наверняка проблема кеширования, и это, безусловно, самая распространенная причина, по которой разработчики думают, что их настройка фавикона сломана, когда на самом деле она работает идеально.
Браузеры агрессивно кешируют фавиконы. В отличие от обычных ресурсов страницы, фавиконы часто кешируются отдельно и на гораздо более длительные периоды. Chrome, например, хранит фавиконы в специальной базе данных, которая не всегда реагирует на обычное обновление страницы. Firefox и Safari имеют похожее поведение. Это означает, что даже после того, как вы заменили файл на своем сервере, браузер может продолжать отображать старую иконку часами или даже днями.
Жесткое обновление: Нажмите Ctrl+Shift+R (Windows/Linux) или Cmd+Shift+R (macOS), чтобы обойти кеш и перезагрузить все ресурсы с сервера. Это работает для большинства ресурсов страницы, но не всегда очищает кеш фавикона конкретно.
Окно инкогнито: Откройте ваш сайт в приватном или инкогнито окне просмотра. Это начинается с полностью пустого кеша и загрузит фавикон свежим с сервера. Если вы видите правильный фавикон в режиме инкогнито, ваша настройка правильна, и обычной сессии просмотра просто нужно время, чтобы подхватить изменение.
Очистите кеш браузера вручную: Если инкогнито подтверждает новый фавикон, но ваша обычная сессия все еще показывает старый, очистите кешированные изображения и файлы вашего браузера. В Chrome перейдите в Настройки, Конфиденциальность и безопасность, Очистить данные просмотра и выберите Кешированные изображения и файлы. После очистки перезагрузите ваш сайт.
Добавьте строку запроса для обхода кеша: В качестве временной меры во время разработки вы можете добавить строку запроса, чтобы заставить браузер рассматривать фавикон как новый ресурс: <link rel="icon" href="/ru/favicon.ico?v=2" sizes="any">. Увеличивайте номер версии каждый раз, когда обновляете фавикон. Удалите строку запроса, когда будете удовлетворены иконкой, или оставьте её как постоянную стратегию версионирования.
Размеры и выбор файлов: ICO против PNG
Следует ли вам использовать файл ICO, файл PNG или оба? Ответ зависит от того, сколько сложности вы хотите в вашей настройке и какие браузеры вам нужно поддерживать.
ICO — универсальный выбор. Формат ICO был стандартным форматом фавикона с тех пор, как Internet Explorer 5 представил фавиконы в 1999 году. Каждый браузер, который поддерживает фавиконы, поддерживает ICO. Один файл ICO может содержать несколько размеров (16x16, 32x32, 48x48 и более), поэтому браузер всегда имеет доступное правильное разрешение без необходимости поддерживать отдельные файлы для каждого размера. Для простоты и максимальной совместимости ICO — самая безопасная ставка.
PNG — современная альтернатива. Все текущие версии Chrome, Firefox, Safari и Edge поддерживают фавиконы PNG через тег <link rel="icon" type="image/png">. Фавиконы PNG немного проще создать (один файл PNG одного размера), но вам нужен отдельный файл и тег для каждого размера, который вы хотите предоставить. Это может означать два или три дополнительных тега link в вашем HTML head.
SVG — новейший вариант. Фавиконы SVG поддерживаются в Chrome, Firefox и Edge, но не в Safari по состоянию на начало 2025 года. Фавикон SVG идеально масштабируется до любого размера, что привлекательно для дисплеев высокого DPI. Однако отсутствие поддержки Safari означает, что вам все еще нужен резервный ICO или PNG.
Для большинства веб-сайтов мы рекомендуем прагматичный подход: используйте многоразмерный файл ICO в качестве вашего основного фавикона и опционально добавьте иконку PNG или SVG в качестве улучшения. Это дает вам универсальную совместимость через файл ICO и современную оптимизацию через дополнительные форматы. Для подробной разбивки того, какие размеры включать и почему, см. наше руководство объяснение размеров фавиконов.