Перейти к основному содержимому

Генератор favicon

Создайте полный пакет фавиконов из SVG, PNG или JPG

Превратите один логотип SVG, PNG или JPG в favicon.ico, PNG для браузеров, значок Apple Touch, значки Android Chrome, site.webmanifest и готовые HTML-теги. Скачайте полный пакет в ZIP; все файлы создаются конфиденциально в браузере.

Перетащите файлы сюда

Редактирование значений по умолчанию для новых файлов

Фон
Радиус углов
Рисунок
Выравнивание по горизонтали
Выравнивание по вертикали

Внутренний отступ поджимает рисунок внутрь, масштаб увеличивает или уменьшает его, а выравнивание определяет, где он встанет, если не заполняет область целиком. Фон и форма углов всегда заполняют иконку целиком.

Веб-манифест

Показывается под иконкой на главном экране или в лаунчере, когда полное имя не помещается. Примерно 12 символов.

Оптимизация

Запускает безопасный пресет оптимизатора перед созданием результата.

Добавьте логотип, чтобы увидеть его во всех размерах favicon.

Результат

head-tags.html

<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Положите все файлы, кроме index.html, в папку, из которой отдаётся ваш сайт, затем вставьте эти теги в head каждой страницы.

Файлов пока нет. Перетащите файлы выше или нажмите ВЫБРАТЬ ФАЙЛЫ.

Что такое favicon?

Favicon: так называют небольшую иконку, которую браузер показывает рядом с заголовком страницы, во вкладке, в закладках, в истории и в результатах некоторых поисковых систем. Начинался он как один файл favicon.ico размером 16 × 16 в корне сайта. Сегодня ту же задачу решает набор файлов разных размеров, потому что вкладка браузера, ярлык на главном экране и предложение установки отрисовывают иконку в совершенно разном масштабе.

Почему пакет favicon, а не один файл

Один файл favicon.ico по-прежнему работает, но сам по себе его уже недостаточно. Вкладки браузера берут из .ico запись на 16 или 32 px, Safari запрашивает apple-touch-icon на 180 px, когда страницу добавляют на Home Screen, а Android Chrome читает из веб-манифеста файлы PNG на 192 и 512 px для предложения установки и заставки. Если экспортировать всё это по одному, получится шесть экспортов, шесть шансов кадрировать что-то по-разному и манифест, написанный вручную. Когда файлы создаются из одного источника, каждый размер выходит одинаковым и требует всего одного перетаскивания.

Как создать пакет favicon

  1. 1

    Перетащите логотип или нажмите ВЫБРАТЬ ФАЙЛЫ, чтобы добавить его. Подходят SVG, PNG, JPG, WebP, GIF, BMP, AVIF и TIFF, до 40 за раз.

  2. 2

    Задайте фон, радиус углов, отступ, масштаб и выравнивание, затем впишите имя приложения и короткое имя, которые попадут в манифест. Каждый размер перерисовывается, как только вы меняете параметры.

  3. 3

    Нажмите СОХРАНИТЬ ВСЁ, чтобы скачать favicon-package.zip, затем вставьте четыре тега link из вкладки HTML в head каждой страницы.

Приватность: ваши файлы не покидают браузер

Преобразование выполняется локально в вашем браузере с использованием JavaScript и WebAssembly. Загрузка файлов или преобразование на стороне сервера не выполняются, поэтому добавляемые вами файлы остаются на вашем устройстве.

Локальная обработка помогает защитить конфиденциальные логотипы, внутренние документы и неопубликованные изображения клиентов. Страницы и код преобразования кэшируются по мере их использования, поэтому уже открытые вами инструменты могут продолжать работать без подключения к сети.

Часто задаваемые вопросы

Какие файлы я получу и куда их положить?

favicon.ico (с размерами 16, 32 и 48 px внутри одного файла), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest и index.html с готовыми тегами. Скопируйте всё, кроме index.html, в папку, из которой отдаётся ваш сайт, затем вставьте четыре тега link в head каждой страницы.

Можно ли взять логотип PNG или JPG вместо SVG?

Да. Подходят SVG, PNG, JPG, WebP, GIF, BMP, AVIF и TIFF. И всё же SVG остаётся лучшим источником, потому что каждый размер рисуется из векторов, а не пересчитывается из пикселей. Растровый логотип меньше 512 px увеличивается для самых крупных иконок и будет выглядеть размытым; строка файла предупредит вас, когда так произойдёт.

Нужен ли favicon.ico, если уже есть иконки PNG?

Оставьте его. Именно этот файл браузеры и поисковые роботы запрашивают из корня сайта, когда ни один тег не указывает им другой адрес, и только он несёт несколько размеров в одном файле. Записи PNG закрывают браузеры, которые их предпочитают, а манифест закрывает предложение установки в Android.