Инструмент
Генератор фавиконок
Выберите логотип — соберём favicon.ico, иконки для iPhone и Android, web manifest и код для вставки на сайт. Всё делается прямо в браузере: картинка никуда не загружается.
Для apple-touch-icon и маскируемой иконки: iPhone заливает прозрачное чёрным.
С каждой стороны. Квадратному логотипу нужно около 20 %.
Цвет строки состояния и заголовка окна у установленного сайта.
Как выглядят иконки
Мелкие размеры показаны в увеличении, чтобы были видны пиксели. Маскируемую иконку Android обрезает по форме значка; пунктир — безопасная зона, её не обрежет ни одна форма.
Во вкладке браузера
Файлы
| Файл | Размер |
|---|
Код для <head>
Положите файлы в корень сайта и вставьте код в <head> каждой страницы — старые теги иконок уберите.
Почему столько файлов и зачем каждый
- Картинка никуда не загружается. Иконки рисуются прямо в браузере — логотип не уходит ни к нам, ни на чужие серверы. Страница работает даже без интернета, если уже открыта.
- Современный минимум вместо зоопарка. favicon.ico — для вкладок, закладок и выдачи Яндекса; SVG — резкая иконка в новых браузерах; apple-touch-icon — ярлык на iPhone; 192 и 512 px с манифестом — Android и установка сайта как приложения. Десятки размеров вроде 57×57 и browserconfig.xml больше не нужны.
- Маскируемая иконка. Android обрезает её по форме значка — кругом, каплей или квадратом со скруглением. Гарантированно видна только середина — круг в 80 % ширины, поэтому логотипу нужен отступ, а под ним — сплошной фон.
- В выдаче появится не сразу. Яндекс обновляет фавиконки отдельно от страниц: после замены новая иконка в результатах поиска может появиться через несколько недель.
Иконка готова — осталось попасть в ТОП-10
Фавиконку видно в выдаче рядом с сайтом. Десятка.ру выведет запросы в ТОП-10 Яндекса — платите только за дни, когда они там стоят.