Как пользоваться
- Загрузите логотип или картинку (лучше квадратную).
- Выберите, как вписать изображение в квадрат, скругление и фон.
- Скачайте .ico или полный пакет .zip и вставьте скопированный код в <head> сайта.
Favicon и ICO: подробности и советы
Что такое favicon
Favicon — маленькая иконка сайта, которая отображается во вкладке браузера, в закладках, в истории и в поисковой выдаче (например, в Яндексе). Она помогает пользователям быстро находить ваш сайт среди десятков вкладок и повышает узнаваемость бренда.
Что входит в пакет
- favicon.ico с размерами 16, 32 и 48 px — классический формат, который запрашивают браузеры и поисковые системы.
- PNG 16×16 и 32×32 — для современных браузеров.
- apple-touch-icon 180×180 — иконка для iPhone и iPad при добавлении сайта на главный экран.
- PNG 192×192 и 512×512 и файл site.webmanifest — для Android и установки сайта как приложения.
Как подключить на сайт
Скачайте ZIP-архив, загрузите файлы в корень сайта и вставьте в раздел <head> код, который показан в панели инструмента (его можно скопировать одной кнопкой). Файл favicon.ico должен лежать именно в корне сайта — именно там его ищут поисковые боты.
Какую картинку выбрать
Используйте простой логотип без мелких деталей: на размере 16×16 пикселей сложные изображения превращаются в «кашу». Лучше подходит квадратная картинка от 512×512 px. Если логотип не квадратный, выберите «Вписать целиком» или «Обрезать по центру». Включите скругление, если нужны мягкие углы, и прозрачный фон, чтобы иконка нормально смотрелась в тёмной и светлой темах.
Вопросы и ответы
Какого размера должен быть исходник?
Лучше от 512×512 px — тогда иконки получатся чёткими.
Что входит в пакет?
favicon.ico (16, 32, 48 px), PNG 16×16, 32×32, 180×180 (apple-touch-icon), 192×192 и 512×512, а также site.webmanifest.