Где показывается фавикон
- вкладки браузера, адресная строка и закладки (маленькие размеры: 16 и 32 px);
- поисковая выдача рядом с названием сайта;
- ярлыки на экране «Домой» в iPhone/iPad (apple-touch-icon) и Android (иконки из веб-манифеста);
- панель задач и ярлыки Windows (крупные размеры ICO, например 48 px).
Какие файлы действительно нужны
| Файл | Размер | Кто использует |
|---|---|---|
favicon.ico | 16, 32, 48 px в одном файле | Все браузеры; запрашивается из корня сайта автоматически |
favicon-32x32.png, favicon-16x16.png | 32 и 16 px | Современные браузеры, предпочитающие PNG |
apple-touch-icon.png | 180 × 180 | Экран «Домой» на iPhone и iPad |
android-chrome-192x192.png, -512x512.png | 192 и 512 px | Экран Android, устанавливаемые веб-приложения |
site.webmanifest | — | Сообщает Android/Chrome, какие иконки и цвета использовать |
ICO — это контейнер, в котором может быть несколько размеров; браузер выбирает нужный. Поэтому один favicon.ico подходит и для вкладки 16 px, и для ярлыка 48 px.
Пошагово
- Подготовьте квадратный исходник, лучше 512 × 512 px или больше. Простая фигура или одна-две буквы читаются в 16 px намного лучше детального логотипа.
- Сгенерируйте файлы. В генераторе фавиконов загрузите картинку или выберите эмодзи либо буквы, проверьте превью во всех размерах и скачайте ZIP.
- Загрузите файлы в корень сайта (чтобы адрес
/favicon.icoоткрывался в браузере). - Добавьте HTML в
<head>каждой страницы.
HTML для вставки
<link rel="icon" href="/favicon.ico" sizes="48x48">
<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">И файл манифеста, на который он ссылается:
{
"name": "Мой сайт",
"short_name": "Мой сайт",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#0f172a",
"background_color": "#0f172a",
"display": "standalone"
}Советы по дизайну
- Сначала проверьте 16 px. Если там иконка не читается, упростите её: толще линии, меньше деталей, сильнее контраст.
- Не делайте apple-touch-icon прозрачной. iOS заливает прозрачные области (обычно чёрным), поэтому нужен сплошной фон.
- Помните о тёмных вкладках. Тёмная иконка на прозрачном фоне может пропасть в тёмной теме браузера; цветная подложка надёжнее.
- Оставьте небольшие поля для Android, который может обрезать иконку в круг или скруглённый квадрат.
А как же SVG-фавиконы?
SVG-иконка (<link rel="icon" type="image/svg+xml" href="/icon.svg">) остаётся чёткой в любом размере и даже может менять цвета для тёмной темы через CSS-медиазапрос внутри файла. Поддержка в браузерах различается, поэтому используйте её как дополнение к ICO и PNG, а не вместо них.
Фавикон не обновляется?
- Откройте
/favicon.icoнапрямую и обновите с очисткой кэша (Ctrl+F5 или Cmd+Shift+R). - Проверьте в приватном окне или другом браузере.
- Поменяйте адрес в тегах link, например
/favicon.ico?v=2, чтобы обойти кэш. - В поисковой выдаче иконка обновится после того, как робот заново обойдёт главную страницу.
Настраиваете остальной <head>? Пригодится генератор мета-тегов.
Частые вопросы
Какого размера должен быть favicon?
Нужны favicon.ico с размерами 16×16, 32×32 и 48×48, apple-touch-icon 180×180 для iPhone и iPad и PNG 192×192 и 512×512 в веб-манифесте для Android. Исходник — квадрат от 512 пикселей.
Нужен ли ещё favicon.ico?
Это по-прежнему самый надёжный запасной вариант: браузеры и многие сервисы сами запрашивают /favicon.ico из корня сайта даже без тега link. Держите его вместе с PNG (и при желании SVG).
Почему у apple-touch-icon чёрный фон?
iOS не поддерживает прозрачность в иконках на экране «Домой» и заливает прозрачные области, обычно чёрным. Для иконки 180×180 используйте сплошной фон.
Почему показывается старый фавикон?
Браузеры агрессивно кэшируют фавиконы. Откройте /favicon.ico напрямую и обновите страницу с очисткой кэша, проверьте в приватном окне или поменяйте адрес файла (например, добавьте ?v=2) в тегах link.
Как сделать, чтобы фавикон показывался в поиске Google и Яндекса?
Подключите его на главной странице через rel="icon", сделайте квадратным, не закрывайте от индексации в robots.txt и используйте размер больше 48×48, как рекомендует Google. Изменения появляются не сразу — после повторного обхода страницы роботом.