как в браузере
Как сделать favicon для сайта
Генератор favicon
Favicon - это небольшая иконка сайта, отображаемая во вкладке браузера, закладках и результатах поиска некоторых сервисов.
Иконку можно собрать из готового изображения или нарисовать из буквы прямо на странице, без графического редактора.
Какие размеры обычно используются
Сайту нужен не один размер иконки, а несколько - под разные места, где она показывается:
- 16x16 и 32x32 - вкладка и панель закладок браузера
- 48x48 - ярлык и панель задач Windows
- 180x180 - apple-touch-icon для iOS
- 192x192 и 512x512 - установка сайта как приложения (PWA, Android)
Файл favicon.ico удобен тем, что хранит сразу несколько мелких кадров и понятен старым браузерам, а крупные PNG подключают отдельными тегами.
Как собрать favicon
-
Загрузите картинку или введите букву
Выберите PNG/JPG с логотипом или оставьте поле пустым и задайте символ, фон и цвет текста.
-
Подгоните кадр
Перетащите изображение мышью и настройте масштаб ползунком - справа видно, как иконка выглядит в размере 16x16.
-
Скачайте favicon.ico
Нажмите "Скачать favicon.ico" - в файл попадут кадры 16, 32 и 48 пикселей; PNG-размеры доступны из блока превью.
Вопросы и ответы
Кнопка "Скачать favicon.ico" собирает один файл с кадрами 16x16, 32x32 и 48x48
Да, галочка "Скругленные углы" обрезает картинку по радиусу - удобно для аватарок и логотипов
Положите favicon.ico в корень сайта и пропишите PNG через <link rel="icon"> в head
Во вкладке браузера, в закладках, на мобильных устройствах и при установке веб-приложения