Фавиконка для сайта: размеры и код
Фавиконка видна во вкладке браузера, в закладках, в выдаче Яндекса и Google и на экране телефона. Хватит пяти файлов и пяти строк кода.
Какие файлы нужны
- favicon.ico (16, 32 и 48 пикселей внутри одного файла): старые браузеры и программы ищут его в корне сайта сами, даже без ссылки в коде.
- icon.svg: векторная иконка для современных браузеров, чёткая на любом экране.
- apple-touch-icon.png 180×180: иконка, когда сайт добавляют на экран iPhone и iPad.
- icon-192.png и icon-512.png: для Android и манифеста приложения.
- site.webmanifest: короткий файл с названием сайта и ссылками на иконки.
Код для страницы
Вставьте в <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">Как нарисовать иконку, которая читается
- В 16 пикселях помещается одна-две буквы или простой знак. Полный логотип с надписью превратится в пятно.
- Берите контрастные цвета: светлая буква на тёмном фоне или наоборот. Вкладки бывают и светлыми, и тёмными, поэтому прозрачный фон рискован.
- Скругление углов делает иконку современнее, круг хорошо смотрится в выдаче поисковиков.
Почему фавиконка не появилась в Яндексе
Поисковики обновляют иконку не сразу: от нескольких дней до пары недель. Проверьте, что /favicon.ico открывается без ошибки и не закрыт в robots.txt, а размер иконки не меньше 120×120 для Яндекса (подойдёт apple-touch-icon 180×180).
Сделать бесплатно за минуту
В нашем генераторе фавиконок можно сделать иконку из буквы, эмодзи или своей картинки и скачать архив со всеми файлами и готовым кодом. Картинка не загружается на сервер: всё рисуется прямо в браузере.
Частые вопросы
Какой размер фавиконки нужен?
Нужен набор: favicon.ico с размерами 16, 32 и 48, векторный icon.svg, apple-touch-icon 180×180 и иконки 192 и 512 пикселей для Android.
Куда положить файлы фавиконки?
В корень сайта, а в head каждой страницы добавить ссылки на них. favicon.ico браузеры ищут в корне сами.
Почему фавиконка не видна в Яндексе?
Поисковики обновляют иконку от нескольких дней до пары недель. Проверьте, что файл открывается, не закрыт в robots.txt и что есть иконка не меньше 120×120.
