Генератор favicon
Загрузите логотип и получите в одном ZIP все значки, которые нужны сайту: favicon.ico с изображениями 16, 32 и 48 пикселей, PNG 48 пикселей для Google, Apple Touch Icon с непрозрачным фоном для iPhone, значки 192 и 512 пикселей для Android, маскируемый значок с учтённой безопасной зоной и site.webmanifest. Если вы загрузите SVG, в набор попадёт и icon.svg. Вы увидите предпросмотр во вкладке, в выдаче Google и на главном экране и скопируете готовый код для <head>; всё работает в вашем браузере.
- Бесплатно, без регистрации
- Файл не покидает ваше устройство
- До 50 МБ на файл
Чтобы начать, добавьте логотип или значок. Подойдут PNG, SVG, JPG и WebP; лучший результат даёт квадратное изображение от 512 × 512 пикселей.
Ваш файл не покидает устройство: изображения обрабатываются в браузере. EXIF и данные о местоположении в результат не попадают.
Как создать favicon
Добавьте логотип
Загрузите логотип в формате PNG, SVG, JPG или WebP. Лучший результат даёт квадратное изображение от 512 × 512 пикселей; SVG тоже подойдёт.
Задайте название, цвета и поля
Введите название сайта и короткое название, выберите цвета темы и фона, при необходимости добавьте поля. Предпросмотры покажут, как значок будет выглядеть во вкладке, в Google и на главном экране.
Скачайте архив и разместите файлы
Скачайте ZIP, загрузите файлы в корневую папку сайта и добавьте показанный фрагмент <head> на свои страницы.
Что сохраняется?
Сохраняется
- Пропорции вашего логотипа: неквадратное изображение вписывается в квадрат и никогда не растягивается
- Прозрачность (в обычных значках; если вы выберете цвет фона, он будет залит)
- Если вы загружаете SVG, icon.svg добавляется без изменений
Изменяется
- Каждый значок пересчитывается под свой размер с высоким качеством
- У Apple Touch Icon и маскируемого значка фон всегда непрозрачный: выбранный вами цвет или белый, если выбрано «Прозрачный»
- В маскируемом значке содержимое лежит в безопасной зоне 80 %
Не переносится
- Из PNG или JPG вектор (SVG) не создаётся; icon.svg есть только при загрузке SVG
- EXIF и другие метаданные в значки не добавляются
Когда это пригодится
Полный набор значков для нового сайта
Одного favicon.ico уже недостаточно: главный экран iPhone, Android и поиск Google ждут разные файлы. Одна загрузка даёт все нужные файлы с правильными именами и размерами.
Значок сайта в выдаче Google
Google показывает значок сайта в результатах поиска из квадратного файла, размер которого кратен 48 пикселям, и этот файл должен быть доступен для обхода. В набор входит такой файл и ссылка на него для <head>.
Сайт, который можно добавить как приложение (PWA)
Чтобы сайт можно было добавить на главный экран, нужны манифест и значки 192 и 512 пикселей. Маскируемый значок не даст обрезать логотип, когда Android вырезает значок кругом или скруглённым квадратом.
Что важно учитывать
- Лучший результат даёт квадратное изображение от 512 × 512 пикселей; крупные значки из меньшего исходника получаются размытыми.
- Тонкие линии и мелкий текст в значках 16 и 32 пикселей нечитаемы; лучше работают жирные контрастные логотипы.
- Цвет темы применяется только в адресной строке мобильных браузеров и зависит от настроек браузера.
- Google может обновлять значок в поиске несколько дней, а то и недель, и браузеры тоже кэшируют значки.
Часто задаваемые вопросы
Какие файлы favicon нужны сайту?
Современный набор такой: favicon.ico в корне сайта, PNG 48 пикселей для Google, по возможности icon.svg, apple-touch-icon.png 180 пикселей для iPhone, значки 192 и 512 пикселей для Android и site.webmanifest. Генератор делает всё это и выдаёт ссылки для <head>.
Что такое маскируемый значок?
Маскируемый значок держит содержимое внутри безопасной зоны и имеет полностью закрашенный фон, поэтому Android может вырезать из него круг, скруглённый квадрат или другую форму в зависимости от устройства. Здесь содержимое помещается в центральную область 80 % изображения 512 пикселей.
Почему Apple Touch Icon непрозрачный и без скруглённых углов?
iOS показывает прозрачные области чёрными и сама скругляет углы. Поэтому значок делается полностью закрашенным и без скруглений, с выбранным вами цветом фона (белым, если выбрано «Прозрачный»).
Почему мой значок не появляется в выдаче Google?
Файл значка не должен быть закрыт в robots.txt, на него должна вести ссылка в <head> главной страницы, а сам он должен быть квадратным с размером, кратным 48 пикселям. После исправления можно запросить повторное индексирование главной в Search Console; обновление всё равно может занять дни или недели.
Что будет, если загрузить неквадратное изображение?
Значки вписываются в квадрат без искажений, и по бокам остаётся пустое место. Если нужно, чтобы картинка заполнила квадрат, сначала обрежьте её до 1:1 инструментом обрезки.
Создаёт ли он SVG-значок из PNG?
Нет. Автоматическое превращение пикселей в вектор может незаметно изменить вид значка, поэтому icon.svg добавляется только тогда, когда вы сами загружаете SVG.
Этот инструмент бесплатный?
Да, полностью бесплатный. Без аккаунта, подписки и водяных знаков.
Загружаются ли мои файлы куда-либо?
Нет. Изображения обрабатываются в вашем браузере и не покидают устройство. EXIF и данные о местоположении в результат не добавляются.