Как добавить favicon на сайт (пошаговое руководство)
Четыре шага от пустой вкладки до безупречного брендинга с точностью до пикселя. Работает с любым HTML-сайтом, CMS или фреймворком.
Что нужно подготовить сначала
Одного favicon 16x16 сегодня уже недостаточно. Современные браузеры, iOS, Android и Windows запрашивают разные размеры и форматы. Прежде чем добавлять теги, убедитесь, что у вас есть полный набор иконок.
Минимальный набор
| Файл | Размер | Кому он нужен |
|---|---|---|
| favicon.ico | мультиразрешение | Браузеры и краулеры, которые по умолчанию запрашивают /favicon.ico |
| favicon-16x16.png | 16x16 | Вкладки браузера и адресная строка |
| favicon-32x32.png | 32x32 | Retina-вкладки, закладки, ярлыки на рабочем столе |
| apple-touch-icon.png | 180x180 | Домашние экраны iOS |
| Иконка манифеста | 192x192 | Домашние экраны Android, ссылка из веб-манифеста |
Как эти размеры выглядят на самом деле
Четыре шага
- 1
Сгенерируйте файлы favicon
Позвольте генератору создать все размеры, спрайт .ico и настроенный manifest.json за один проход. Загрузите логотип, скриншот или даже эмодзи и скачайте полный комплект. Никогда не создавали иконки раньше? Начните с руководства как создать favicon.
- 2
Добавьте файлы в корень сайта
Скопируйте скачанные файлы в каталог, который обслуживает корень вашего домена. На статическом сайте это корневая папка; в большинстве фреймворков — каталог public/. Цель в том, чтобы https://yoursite.com/favicon.ico открывался напрямую.
- 3
Добавьте теги <link> в ваш <head>
Сошлитесь на каждую иконку тегами <link> внутри <head> документа (icon, apple-touch-icon и manifest) на каждой странице, что обычно означает общий шаблон или макет.
- 4
Проверьте, что всё работает
Задеплойте, затем сделайте принудительное обновление страницы и проверьте вкладку. Самая надёжная проверка — автоматическое сканирование, которое подтверждает, что каждый тег разрешается, и сигнализирует о любых отсутствующих иконках для платформ.
Теги <link>
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Вставьте это внутрь элемента <head> каждой страницы. Ссылка на manifest — это то, что даёт вам предложения об установке и иконки на домашнем экране. Смотрите что такое manifest.json.
Приёмы для конкретных платформ
Используете фреймворк или CMS? Некоторые из них берут теги в head на себя, по своим соглашениям. Руководства по платформам охватывают Next.js, React, WordPress и Shopify.
Частые ошибки
| Ошибка | Решение |
|---|---|
| Кэш браузера | Старые favicon сохраняются. Сделайте принудительное обновление страницы или добавьте ?v=2 к href ссылки. |
| Неправильный путь | Ведущий слэш имеет значение. /favicon.ico обслуживается из корня, а не из текущей папки. |
| Отсутствует apple-touch-icon | Без него домашние экраны iOS откатываются к размытому скриншоту. |
Часто задаваемые вопросы
Куда положить файл favicon?
Поместите favicon.ico и остальные файлы иконок в корневой каталог сайта (или в папку public/ в большинстве фреймворков), чтобы они обслуживались из корня домена, например https://example.com/favicon.ico.
Нужен ли мне до сих пор файл favicon.ico?
Да. Браузеры и краулеры по умолчанию всё ещё запрашивают /favicon.ico, поэтому мультиразрешающий .ico рядом с современными иконками PNG и SVG обеспечивает максимальную совместимость.
Почему мой favicon не отображается после того, как я его добавил?
Браузеры агрессивно кэшируют favicon. Сделайте принудительное обновление страницы, добавьте строку версии вроде ?v=2 к ссылке и убедитесь, что путь к файлу верный. Смотрите наше руководство по устранению проблем с favicon для каждой причины.