Фавикон — это маленькая иконка, которую браузер показывает на вкладке, в закладках и истории, а также на главном экране телефона, когда кто-то сохраняет ваш сайт. Чтобы разместить его на сайте, нужно четыре файла и около пяти минут, и большая часть разочарований у людей возникает из-за кэша, которому посвящён последний раздел.
Минимальный набор, который действительно работает
Вам не нужны шестнадцать PNG или browserconfig.xml. Плитки Windows и старые форматы Internet Explorer мертвы. Четыре ресурса покрывают все браузеры и устройства, используемые сегодня:
| Файл | Размер | Зачем он нужен |
|---|---|---|
favicon.ico | 16 · 32 · 48 (многоразмерный) | Старые браузеры и Google Search, который запрашивает /favicon.ico напрямую. |
icon.svg | векторный | Современные браузеры предпочитают его: чёткий при любом размере и способный адаптироваться к тёмному режиму. |
apple-touch-icon.png | 180 × 180 | Главный экран iOS и Safari. iOS игнорирует SVG здесь, поэтому PNG обязателен. |
android-chrome 192 и 512 | 192 · 512 | Главный экран Android и устанавливаемые PWA, на которые ссылается веб-манифест приложения. |
HTML для вставки в <head>
<link rel="icon" href="/favicon.ico" sizes="48x48"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Браузер читает все четыре строки и выбирает лучший поддерживаемый формат, поэтому современный Chrome или Safari использует SVG, а старый браузер прибегает к .ico. sizes="48x48" в строке .ico просто объявляет самое большое изображение, которое он содержит.
Веб-манифест приложения
Манифест — это то, что позволяет Android и установкам PWA использовать подходящую иконку. Минимальный site.webmanifest:
{
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
]
}
"purpose": "any maskable" позволяет Android обрезать иконку по своей адаптивной форме, не срезая ваш логотип, при условии, что вы оставите вокруг него безопасный отступ (см. Продвинутые советы).
Куда помещать файлы
Поместите все файлы в корневой каталог вашего сайта. Браузеры — и Googlebot — запрашивают /favicon.ico из корня автоматически, даже без тега <link>, поэтому держать его там — самый безопасный вариант по умолчанию.
Проверьте, что всё действительно сработало
- Принудительная перезагрузка страницы:
Ctrl+Shift+R(Windows) илиCmd+Shift+R(Mac). - Всё ещё не выходит? Откройте сайт в приватном окне или окне инкогнито: оно начинается с пустым кэшем.
- Загрузите каждый файл напрямую, например
yourdomain.com/favicon.ico, и убедитесь, что он возвращает изображение (HTTP 200), а не 404. - Проверьте отрендеренный
<head>в DevTools, а не только исходный файл: этап сборки или CMS могут переписать пути.
Что отнимает больше всего времени: кэш
Браузеры кэшируют фавиконы упорнее почти любого другого ресурса и иногда сохраняют старый несмотря на обычные перезагрузки. Если новая иконка отказывается появляться:
- Выполните принудительную перезагрузку, затем полностью закройте вкладку и откройте новую: кэш фавиконов обычно привязан к вкладке.
- Во время тестирования добавьте параметр версии, чтобы браузер считал файл новым:
<link rel="icon" href="/favicon.ico?v=2">. - Google Search хранит собственную копию и обновляет её по своему графику: рассчитывайте на дни, иногда недели, прежде чем результат поиска покажет новую иконку.
Всё на этом сайте выполняется в вашем браузере. Изображение, которое вы загружаете, никогда не покидает ваше устройство: нет никакого сервера, куда бы его отправить.