Мои инструменты

Генератор favicon

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

PNG / JPEG / WebP / GIF / SVG — или перетащите файл на эту карточку

Добавьте изображение (или переключитесь на буквы), и все размеры появятся здесь — кнопки «Создать» нет.favicon.ico 16/32/48 · PNG 16 · 32 · 48 · 180 · 192 · 512 · site.webmanifest · HTML

Как пользоваться

  1. Выберите изображение или перетащите его на карточку: все размеры появятся сразу. Кнопки создания нет — что видите, то и скачиваете.
  2. Ещё нет логотипа? Переключитесь на «Буква / эмодзи» и введите один-два символа. Выбор цвета задаёт фон, а буква становится чёрной или белой по контрасту.
  3. Скачайте набор, распакуйте его в корень сайта, вставьте скопированные теги <link> в <head> и перезагрузите сайт — иконка вкладки должна появиться.

Пример

Источник

logo.png · 512×512, форма «Скруглённые углы»

Набор (9 файлов)

favicon.ico (16/32/48)
favicon-16x16.png
favicon-32x32.png
favicon-48x48.png
apple-touch-icon.png (180)
android-chrome-192x192.png
android-chrome-512x512.png
site.webmanifest
snippet.html

Один и тот же источник с одними и теми же параметрами даёт побайтно идентичные PNG и побайтно идентичный ZIP (метка времени архива фиксирована на 1980-01-01), поэтому набор можно коммитить и сравнивать в diff. Смена формы только обрезает углы; она никогда не перерисовывает изображение.

Область применения, ограничения и частые вопросы

  • Экспорта в SVG нет. Для SVG, который выживает в 16 px, нужны упрощённые вручную контуры; обёртывание растра в SVG или отрисовка системным шрифтом лишь имитировала бы вектор. Если нужен .svg, храните свой рядом с этим набором PNG.
  • Изображения вписываются, но никогда не обрезаются. Неквадратный логотип сохраняет прозрачные поля — сначала обрежьте или скомпонуйте его (здесь помогут инструменты изменения размера и конвертации).
  • Прозрачным иконкам фон добавляет платформа: iOS рисует его за apple-touch-icon, некоторые лаунчеры Android тоже. Если нужен контролируемый фон, используйте «Буква / эмодзи» или добавьте фон в исходное изображение.
  • site.webmanifest перечисляет только иконки — без name и short_name. Это название вашего сайта, которое инструмент знать не может; добавьте оба ключа после распаковки (name необязателен, браузеры используют заголовок страницы).
  • favicon.ico содержит 16, 32 и 48 px, а не 64 или 128. Этого достаточно для современных браузеров и Windows; при необходимости добавьте другие размеры в PNG.
  • Анимированные GIF / WebP: используется только первый кадр. Favicon всё равно не анимируются.
  • Буквенные иконки рисуются системным шрифтом, поэтому различаются на macOS, Windows, Linux и телефонах. PNG фиксирует то, что показывает ваше устройство, — поэтому выбора шрифта и нет.
  • Загрузки URL и онлайн-проверки нет: инструмент не принимает адрес сайта и не может проверить развёрнутый favicon. После развёртывания откройте сайт и посмотрите на вкладку.
  • Ограничения: 20 МБ на файл и 8000 px на сторону. Источники меньше 180 px увеличиваются для крупных иконок и могут выглядеть размыто.
  • Без кадрирования, удаления фона, пакетной обработки и истории: после перезагрузки всё пусто (ничего не сохраняется, ничего не попадает в URL).

Что обычно нужно дальше, когда иконки уже на месте.

Изменение размера изображений

Конвертер форматов изображений