Как сделать favicon для сайта: размеры, форматы и HTML-код
Чтобы сделать favicon для сайта, подготовьте небольшой комплект файлов: favicon.ico с размерами 16, 32 и 48 px, векторный icon.svg, apple-touch-icon.png 180×180 для iPhone и iPad и PNG-иконки 192 и 512 px для веб-манифеста, включая maskable-версию. Подключаются они четырьмя строками в <head>. Ниже — за что отвечает каждый файл, как подготовить исходник и какой код вставить.
Какие файлы нужны и зачем
Фавикон давно перестал быть одной картинкой 16×16. Браузер показывает его во вкладке и в закладках, поисковые системы — рядом с адресом сайта в выдаче, смартфон — на главном экране, если посетитель добавит туда сайт. У каждого места свои требования, поэтому современный набор выглядит так:
| Файл | Размер | Где используется |
|---|---|---|
| favicon.ico | 16, 32 и 48 px в одном файле | вкладки, закладки, старые браузеры, поисковики |
| icon.svg | вектор, квадрат | вкладки современных браузеров, тёмная тема |
| apple-touch-icon.png | 180×180 | главный экран iPhone и iPad |
| icon-192.png | 192×192 | Android, установка сайта как приложения |
| icon-512.png | 512×512 | заставка при запуске установленного сайта |
| icon-mask.png | 512×512 | адаптивные иконки Android: круг, скруглённый квадрат |
Длинные списки PNG под каждую модель устройства — 57, 72, 114, 152 px и так далее — больше не нужны: системы сами уменьшают крупную иконку, а лишние теги только засоряют <head>.
Шаг 1. Подготовьте исходник
Начните с квадратного векторного изображения: логотипа, монограммы или простой пиктограммы. Для фавикона хорошо подходят залитые иконки — сплошные формы остаются читаемыми и в 16 px, где тонкие линии превращаются в серые полоски. Перед работой пропустите файл через оптимизатор SVG: он удалит метаданные редактора и лишнюю точность координат.
Проверьте исходник по трём признакам:
- силуэт узнаётся в 16×16 — уменьшите превью и посмотрите на него издалека;
- нет мелкого текста: одна буква в 16 px читается, две-три уже сливаются;
- знак занимает почти весь квадрат, без широких прозрачных полей.
Шаг 2. Соберите favicon.ico
ICO — контейнер, внутри которого лежит несколько растровых картинок, а браузер выбирает подходящую. Размер 16 px нужен для вкладки на обычном экране, 32 px — для экранов высокой плотности, 48 px — запас для мест, где значок показывают крупнее. Загрузите SVG или PNG в генератор favicon: он соберёт ICO с размерами 16, 32, 48 и 64 px, файл site.webmanifest и готовый HTML-сниппет. Обработка идёт в браузере, исходник никуда не отправляется.
Если своего логотипа нет, возьмите готовую пиктограмму: иконки в формате ICO скачиваются прямо со страницы иконки и уже содержат размеры от 16 до 64 px.
Шаг 3. Добавьте SVG-версию
Векторный фавикон остаётся чётким на экране любой плотности. Chrome, Firefox и Edge поддерживают его давно, Safari — начиная с версии 26, а остальным браузерам достанется ICO. Внутри SVG можно учесть тёмную тему, чтобы тёмный значок не терялся на тёмной панели вкладок:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<style>
path { fill: #111418; }
@media (prefers-color-scheme: dark) { path { fill: #e6e9ee; } }
</style>
<path d="…"/>
</svg>
Шаг 4. Подготовьте PNG для телефонов
Для iPhone и iPad нужен apple-touch-icon.png размером 180×180. Прозрачность здесь не работает — iOS заливает прозрачные области чёрным, поэтому задайте фон и оставьте вокруг знака поля около 20 px. Скруглять углы не нужно: система сделает это сама.
Для манифеста подготовьте PNG 192×192 и 512×512, а также отдельную maskable-версию 512×512. Android обрезает такие иконки по форме, которую выбрал производитель или пользователь, и гарантированно сохраняет только круг в центре радиусом 40% от ширины. Всё значимое держите внутри этого круга, а фон растяните на весь квадрат. PNG нужных размеров за один раз соберёт генератор иконок для iOS, Android и PWA, а отдельный файл удобно подогнать инструментом изменения размера.
Шаг 5. Вставьте код
Файлы кладут в корень сайта и подключают в <head> каждой страницы:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<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">
Атрибут sizes="32x32" у ICO — не опечатка: без него Chrome может выбрать ICO вместо SVG. В манифесте перечисляют PNG-иконки:
{
"name": "Мой сайт",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icon-mask.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]
}
Как фавикон попадает в поиск
Яндекс и Google берут значок с главной страницы, поэтому код должен стоять на ней, а файлы не должны быть закрыты в robots.txt. Яндекс рекомендует SVG или картинку 120×120 px, принимает также 16×16 и 32×32, а анимацию не поддерживает. После того как робот скачает файл, иконка появится в выдаче в течение двух недель.
Google советует значок крупнее 48×48, а SVG в его справке среди поддерживаемых форматов не значится. Зато Google умеет брать фавикон из apple-touch-icon, так что PNG 180×180 закрывает и эту задачу.
Частые ошибки
- Только SVG без ICO. Часть браузеров и сервисов останется без значка.
- Прозрачный apple-touch-icon. На iOS фон станет чёрным.
- Старый значок в кэше. Браузеры долго хранят фавикон; после замены добавьте к адресу версию, например
/favicon.ico?v=2. - Разные картинки в разных файлах. Если обновили логотип, пересоберите весь комплект, а не только ICO.
Итог
Современному сайту достаточно ICO, SVG, apple-touch-icon 180×180 и манифеста с иконками 192 и 512 px, включая maskable-версию. Соберите их из одного векторного исходника, проверьте в 16 px и подключите четырьмя строками кода. Размеры для мобильных платформ подробно разобраны в статье о размерах иконок приложений.