Генератор фавиконок

Создайте полный комплект фавиконок — ICO, PNG, иконку Apple touch, иконки PWA, веб-манифест и HTML-фрагмент — локально в вашем браузере.

Исходное изображение
Перетащите или выберите PNG, JPEG, WebP или SVG. Каждая платформа использует это изображение, если вы не переопределите его ниже.
Информация о сайте
Используется манифестом, apple-touch-icon и HTML-фрагментом.

Отображается, когда название приложения слишком длинное для поверхности.

Необязательно. Не включается в манифест, если поле пусто.

Где открывается установленное PWA.

Префикс, применяемый к каждому href в HTML-фрагменте и к каждому src в массиве icons манифеста.

Управляет theme_color манифеста и тегом HTML <meta name="theme-color">.

background_color манифеста. Используется браузерами для отрисовки заставок PWA.

Фавикон для настольного браузера
Управляет favicon.ico, favicon-16x16.png, favicon-32x32.png и (если исходник — SVG) favicon.svg.

Визуальное пространство вокруг исходника внутри иконки.

Вкладка настольного браузера
Вкладка настольного браузера (dark)
Результат поисковой системы
iOS web clip
Управляет apple-touch-icon.png размером 180×180, используемым на главных экранах iOS.

Иконки Apple должны быть непрозрачными, поэтому эта заливка применяется всегда.

Визуальное пространство вокруг исходника внутри иконки.

Главный экран iOS
Иконки PWA
Управляет pwa-192x192.png, pwa-512x512.png и маскируемыми вариантами.

Визуальное пространство вокруг исходника внутри иконки.

Безопасная зона, рекомендованная W3C, — 40%. Содержимое исходника остаётся видимым при любой маске платформы.

Панель задач Windows
Лаунчер Android
Созданный комплект
Нажмите «Сгенерировать», чтобы отрисовать все ресурсы, собрать zip и скопировать HTML-фрагмент.
Комплект ещё не создан
Выберите изображение и нажмите «Сгенерировать», чтобы собрать комплект фавиконок.

Что генерирует инструмент

Этот генератор превращает одно изображение в полный современный набор фавиконок — многоразмерный .ico для старых браузеров, PNG-варианты 16 / 32 / 180 / 192 / 512, опциональный исходный .svg, site.webmanifest для PWA и HTML-фрагмент, который вы вставляете в <head>. Каждый байт создаётся в вашем браузере; без загрузок на сервер, без сервера, без аналитики.

Что входит в набор

  • favicon.ico — многокадровый (16 / 32 / 48) для вкладок браузера, закладок и старых ярлыков Windows.
  • favicon-16x16.png и favicon-32x32.png — современные PNG-варианты, используемые текущими браузерами.
  • favicon.svg — включается только если ваше исходное изображение в формате SVG и переключатель «Использовать исходный SVG» включён.
  • apple-touch-icon.png — 180×180, непрозрачный, используется на главных экранах iOS.
  • pwa-192x192.png и pwa-512x512.png — стандартные иконки PWA.
  • pwa-maskable-192x192.png и pwa-maskable-512x512.png — маскируемые варианты с рекомендованной W3C безопасной зоной.
  • site.webmanifest — манифест PWA, связанный с указанными выше иконками.

Как работают отступы, фон и безопасные зоны для маскируемых иконок

У каждой платформы свой отступ («Поля»), чтобы оставить свободное пространство внутри холста иконки. Переключатель «Добавить фон» закрашивает непрозрачный квадрат за вашим исходным изображением — полезно, когда исходник прозрачен, а место назначения требует непрозрачности (главный экран Apple), либо просто для визуального контраста на вкладке браузера. Маскируемые иконки PWA используют дополнительную безопасную зону поверх платформенного отступа: всё, что находится за пределами центральных ~80%, может быть обрезано Android, Windows или ChromeOS при применении круглой, скруглённой или квадратоподобной маски.

Подключение набора к вашему сайту

  1. Распакуйте загруженный архив в корень веб-сайта (чтобы файлы находились по адресам /favicon.ico, /site.webmanifest и т. д.).
  2. Вставьте HTML-фрагмент в <head> вашего сайта.
  3. Если вы раздаёте ресурсы из вложенного пути (например /static/icons/), задайте «Путь к ресурсам» перед генерацией, чтобы фрагмент и манифест использовали правильные URL-адреса.
  4. Если вы настроили манифест за пределами того, что предоставляет этот инструмент (например, добавили categories или screenshots), откройте site.webmanifest в текстовом редакторе и отредактируйте его напрямую — это обычный JSON.