Как пользоваться
- 1Загрузите изображение или введите букву либо эмодзи.
- 2Для текста выберите цвет фона, цвет символа и скругление.
- 3Скачайте нужные файлы: favicon.ico, PNG и site.webmanifest.
- 4Вставьте HTML-код в <head> сайта.
Какие файлы создаются
PNG размером 16, 32 и 48 пикселей для вкладок браузера, 180×180 для apple-touch-icon (иконка на главном экране iPhone), 192 и 512 для Android и PWA, настоящий многоразмерный favicon.ico с несколькими PNG внутри, файл site.webmanifest и HTML-код с подключением всех иконок. Всё создаётся в браузере.
Favicon в выдаче Яндекса и Google
И Яндекс, и Google показывают favicon рядом с сайтом в результатах поиска, поэтому узнаваемая иконка повышает заметность сниппета. Используйте простой символ или букву с контрастным фоном: детали логотипа на 16 пикселях не видны. После замены иконки поисковикам может понадобиться несколько дней или недель, чтобы её обновить.
Частые вопросы
Нужен ли favicon.ico, если есть PNG?
Желательно. Некоторые сервисы и старые браузеры запрашивают именно /favicon.ico в корне сайта.
Какое изображение лучше загружать?
Квадратное, не меньше 512×512 пикселей, с простой формой и без мелкого текста.
Куда положить файлы?
В корень сайта, рядом с index-страницей. Пути в HTML-коде рассчитаны именно на это.
Результаты не радуют?
Обратитесь в Webin Agency: быстрые сайты с SEO-оптимизацией, интернет-магазины и ведение Google Ads.