Favicon в HTML: как подключить правильно (ICO, PNG, SVG, iOS и PWA)
Иконка сайта (favicon) — это небольшой, но важный элемент, который виден на вкладках браузера, в списке закладок, на экране смартфона и в ярлыках PWA. Неправильно подключённый favicon даёт размытые иконки, 404-запросы и предупреждения в Lighthouse. В этом руководстве вы получите оптимальный набор ссылок и практики, которые работают в 2026 году во всех актуальных браузерах.
Быстрый старт: минимально достаточная разметка
Если вам нужен простой и надёжный набор, используйте ICO для совместимости и пару PNG для плотных экранов.
<!-- Вставьте в <head> -->
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<meta name="theme-color" content="#ffffff"> <!-- Цвет темы для мобильных браузеров -->
Почему так: ICO обеспечивает обратную совместимость (Windows, старые браузеры), а PNG 32×32 и 16×16 выглядят чётко на десктопах. theme-color пригодится для Android/Chrome, где цвет интерфейса подстраивается под сайт.
Современный вариант: SVG + fallback
SVG даёт идеальную чёткость на любых плотностях пикселей и позволяет варьировать размеры без набора десятков PNG. Но оставьте fallback для браузеров без поддержки SVG-иконок.
<!-- SVG как основной вариант -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
<!-- Fallback (ICO или PNG) -->
<link rel="alternate icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
Обратите внимание на type="image/svg+xml" и sizes="any" — это подсказки браузеру о формате и масштабируемости иконки.
Тёмная тема: разные иконки для light/dark
Можно отдать разные SVG-иконки в зависимости от темы системы. Это поддерживается в современных браузерах (Chrome, Firefox).
<link rel="icon" href="/favicon-dark.svg" type="image/svg+xml" media="(prefers-color-scheme: dark)">
<link rel="icon" href="/favicon.svg" type="image/svg+xml" media="(prefers-color-scheme: light)">
<!-- И обязательно fallback -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
Safari поддерживает тёмную тему для mask-icon (см. ниже), но для обычных favicons с media-предикатами ведёт себя не всегда одинаково. Держите fallback!
iOS и Safari: apple-touch-icon и mask-icon
Для экранов iPhone и iPad используйте удобную чёткую иконку 180×180. Для закреплённых вкладок Safari — монохромная SVG-маска с цветом заливки.
<!-- Иконка для добавления сайта на экран iOS -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Закреплённая вкладка Safari (монохромная маска + цвет) -->
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0a84ff">
Подготовьте apple-touch-icon.png без прозрачности и с хорошими отступами. mask-icon должен быть векторным (чёрная форма на прозрачном фоне).
PWA и Android: web manifest
Если ваш сайт можно «установить» как приложение (PWA), подключите манифест с набором иконок разных размеров.
<link rel="manifest" href="/site.webmanifest">
Пример site.webmanifest:
{
"name": "Мой сайт",
"short_name": "Сайт",
"start_url": "/",
"display": "standalone",
"theme_color": "#ffffff",
"background_color": "#ffffff",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
]
}
Эти иконки используются на экране устройства и в лаунчере при установке приложения.
MIME-типы и сервер
Убедитесь, что сервер отдаёт корректные типы. Особенно важно для SVG, иначе браузер может проигнорировать иконку.
# .htaccess (Apache)
AddType image/svg+xml .svg
AddType image/x-icon .ico
Кэширование и обновление favicon
Иконки обычно кэшируются надолго. Чтобы принудительно обновить их у пользователей после редизайна, добавьте версию в URL или меняйте имя файла.
<link rel="icon" href="/favicon.svg?v=2" type="image/svg+xml" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png?v=2">
Лучше применять «ревизию» имени файла (например, favicon-32.2.png) на уровне сборки, чем query-параметры — так кэш-контроль предсказуемее.
Частые ошибки и как их избежать
- Только один
favicon.icoв корне. Совместимо, но выглядит размыто на ретина-экранах. Добавьте PNG/SVG. - Неверный
typeдля SVG. Используйтеimage/svg+xml. - Отсутствуют размеры у PNG. Всегда указывайте
sizesдля растровых иконок. - Неучтён iOS. Добавьте
apple-touch-icon180×180. - Нет fallback. Даже при SVG оставляйте ICO/PNG на всякий случай.
- Слишком тяжёлые файлы. Достаточно 16–32 КБ для PNG, SVG оптимизируйте SVGO.
Проверка и отладка
- DevTools → Application → Manifest: проверьте, что иконки подтянулись и нет 404.
- Вкладка Network: убедитесь в корректных MIME-типах и ответах 200.
- Lighthouse: прогоните аудит PWA/Best Practices — увидите рекомендации по иконкам.
- Проверьте тёмную тему, переключив её в системе и перезагрузив вкладку.
Готовый «полный» набор для продакшена
Этот комплект закрывает большинство сценариев: SVG + PNG, iOS, Safari pinned, манифест и цвет темы.
<!-- Вставьте в <head> -->
<link rel="icon" href="/favicon.svg?v=2" type="image/svg+xml" sizes="any">
<link rel="icon" href="/favicon-dark.svg?v=2" type="image/svg+xml" media="(prefers-color-scheme: dark)" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png?v=2">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png?v=2">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2">
<link rel="mask-icon" href="/safari-pinned-tab.svg?v=2" color="#0a84ff">
<link rel="manifest" href="/site.webmanifest?v=2">
<meta name="theme-color" content="#ffffff">
Полезные советы
- Держите
/favicon.icoв корне — многие браузеры и боты запрашивают его автоматически. - SVG-иконку делайте простую, без текста мелким кеглем и без сложных фильтров — это улучшит читаемость на маленьких размерах.
- Для генерации набора иконок используйте любой удобный генератор, но проверяйте итоговую разметку вручную по чек-листу из этой статьи.
Что дальше
Favicon — часть базовой вёрстки, которую важно настроить однажды и забыть. Хотите системно прокачать базовые навыки HTML/CSS и собрать аккуратный «скелет» проекта? Загляните в практический курс по вёрстке: Прокачать вёрстку на практике в курсе «Вёрстка сайта с нуля 2.0» — там вы закрепите все приёмы на реальных макетах.
-
Создано 23.01.2026 17:05:41
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.