Генератор фавиконов
Сделайте иконку сайта из логотипа, букв или эмодзи и скачайте полный набор: favicon.ico, иконки для iPhone и Android, манифест и код для вставки.
Во вкладке браузера
Все размеры
Файлы
Код для <head>
Положите файлы в корень сайта, рядом с главной страницей, и вставьте этот код внутрь тега head на каждой странице.
Фавикон за пару минут
- 1Выберите основубуквы, эмодзи или свою картинку
- 2Настройте видцвета, шрифт, скругление и размер
- 3Скачайте наборZIP с иконками, манифестом и кодом
Текст, эмодзи или картинка
Буквы на цветном фоне - самый частый вариант: первая буква названия читается даже при 16 px. Эмодзи - быстрый способ получить яркую иконку без дизайнера. Логотип лучше брать квадратный и без мелких деталей: при 16 px всё мелкое сливается.
Проверьте маленький размер
Посмотрите превью во вкладке на светлой и тёмной теме. Если знак теряется на тёмной вкладке, добавьте фон или выберите цвет поярче. Поля вокруг картинки помогают, когда логотип упирается в края.
Что делать с файлами
Положите все файлы из архива в корень сайта, рядом с главной страницей, и вставьте код в раздел head. В WordPress, Tilda и других конструкторах обычно достаточно загрузить favicon.ico или PNG 512 px в настройках сайта.
Частые вопросы
Не нашли ответ - напишите нам, подскажем.
Здесь вы создаёте свою иконку с нуля. «Фавикон сайта» делает обратное: по ссылке находит и скачивает иконки, которые уже стоят на чужом сайте.
Минимум - favicon.ico в корне сайта: его ищут все браузеры. PNG 32 px даёт чёткую иконку во вкладке, apple-touch-icon.png 180 px - иконку на экране iPhone, а site.webmanifest с иконками 192 и 512 px нужен Android и PWA.
Три картинки: 16, 32 и 48 px в формате PNG. Браузер и Windows сами выбирают подходящий размер.
iOS сам скругляет углы иконки на экране «Домой», а прозрачные места заливает чёрным. Поэтому apple-touch-icon мы сохраняем квадратной и с фоном: белым, если вы выбрали прозрачный.
Да. Эмодзи рисуется шрифтом вашей системы: на iPhone в стиле Apple, на Windows в стиле Microsoft, на Android в стиле Google. В файл попадает тот вид, который вы видите в превью.
Распакуйте архив в корень сайта и вставьте код из блока «Код для <head>» внутрь тега head. Если иконка не сменилась, обновите страницу без кэша: браузеры долго помнят старый фавикон.
Попробуйте также
Тоже бесплатно и без регистрации