ESC

Загрузите исходное изображение

Перетащите изображение сюда

Лучше всего подходит квадратный PNG, JPG или SVG (до 8 МБ).

Краткие рекомендации

  • Используйте исходное изображение не менее 1024×1024 пикселей для чёткого результата.
  • Располагайте важные элементы по центру — мелкие иконки обрезаются сильнее.
  • Прозрачные PNG лучше смотрятся на тёмных темах браузера.
  • Обновите пути в сгенерированном коде в соответствии с вашим проектом.

HTML-код

Вставьте эти строки внутрь тега вашего сайта.

Предпросмотр манифеста


                

Зачем использовать генератор фавиконов?

Полный пакет

PNG всех размеров, favicon.ico, манифест и browserconfig в одном архиве.

Умное масштабирование

Автоматическое центрирование и масштабирование изображения для каждого разрешения.

Готовый HTML-код

Копируйте сгенерированные строки для тега .

Конфиденциальность

Всё работает в браузере — никаких загрузок на сервер.

Как пользоваться генератором фавиконов?

1

Загрузите изображение

Загрузите квадратный PNG, JPG или SVG-логотип (до 8 МБ).

2

Выберите размеры и стиль

Укажите размеры фавиконов, стиль фона и скругление углов.

3

Просмотрите результат

Проверьте каждый размер иконки и скопируйте HTML-код при необходимости.

4

Скачайте пакет

Скачайте ZIP-архив с PNG, favicon.ico, манифестом и файлами browserconfig.

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

Квадратный прозрачный PNG размером 1024x1024 пикселей или больше даёт наиболее чёткие результаты на всех размерах. SVG тоже подходит и идеально масштабируется для любого разрешения. JPG работает, но не поддерживает прозрачный фон — инструмент добавит сплошной цвет фона. Для лучшего качества: используйте изображение не менее 512x512 пикселей, держите дизайн по центру и избегайте мелких деталей, поскольку фавиконы отображаются в размерах вплоть до 16x16 пикселей.

Генератор создаёт PNG-иконки следующих размеров: 16, 24, 32, 40, 48, 57, 64, 72, 96, 120, 128, 144, 150, 180, 192, 256, 384 и 512 пикселей. Шаблон «Современный» включает 5 наиболее важных размеров; шаблон «Полный» генерирует все 18. favicon.ico содержит версии 16, 32 и 48 пикселей, упакованные в один файл для поддержки устаревших браузеров.

favicon.ico — устаревший формат-контейнер с несколькими разрешениями, поддерживаемый всеми браузерами начиная с IE 5. Современные браузеры (Chrome, Firefox, Safari, Edge) предпочитают PNG-фавиконы, поскольку они поддерживают полную глубину цвета и прозрачность при меньшем размере файла. Лучшая практика: используйте оба варианта — favicon.ico для совместимости со старыми браузерами и теги <link rel="icon" type="image/png"> для современных браузеров.

Apple Touch-иконка (180x180 пикселей) используется, когда пользователь добавляет ваш сайт на главный экран iPhone или iPad. Без неё iOS использует снимок экрана вашей страницы в качестве иконки, что выглядит непрофессионально. Добавьте <link rel="apple-touch-icon" href="/apple-touch-icon.png"> в тег <head> вашего HTML. Этот инструмент генерирует PNG размером 180 пикселей и включает правильную HTML-строку в HTML-код. Современный iOS (10+) требует только 180 пикселей.

Progressive Web Apps (PWA) требуют иконки размером 192x192 и 512x512 пикселей, перечисленные в файле site.webmanifest. Иконка 192 пикселя отображается на главном экране Android при установке PWA. Иконка 512 пикселей используется на экране загрузки PWA. Этот инструмент генерирует оба PNG-файла и создаёт site.webmanifest с правильным массивом иконок. Добавьте <link rel="manifest" href="/site.webmanifest"> в тег <head> вашего HTML для поддержки установки PWA.

Сгенерированный HTML-код включает: тег <link rel="icon"> для стандартного фавикона, тег <link rel="apple-touch-icon"> для иконок на главном экране iOS, тег <link rel="manifest"> указывающий на site.webmanifest для поддержки PWA, и тег <meta name="msapplication-config"> указывающий на browserconfig.xml для плиток Windows. Вставьте все строки в тег <head> вашего HTML. Обновите пути, если иконки находятся в подпапке.

Да. Современные браузеры (Chrome 80+, Firefox 41+, Safari 15+) поддерживают SVG-фавиконы через <link rel="icon" type="image/svg+xml" href="/favicon.svg">. SVG-фавиконы идеально масштабируются при любом разрешении и поддерживают тёмный режим через CSS @media (prefers-color-scheme: dark). Включите опцию «Включить favicon.svg» в этом инструменте, чтобы добавить SVG в пакет. Оставьте также файлы ICO и PNG для поддержки Safari 14 и старых браузеров.

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

Что такое генератор фавиконов?

Генератор фавиконов берёт одно изображение и создаёт иконки всех нужных размеров — favicon.ico, Apple touch icon, иконки для Android-манифеста и другие. Вместо ручного изменения размеров в Photoshop вы загружаете изображение один раз и скачиваете готовый пакет.

Что входит в пакет

Инструмент создаёт мультиразмерный ICO-файл, отдельные PNG от 16x16 до 512x512, Apple touch icon, а также HTML-код и site.webmanifest, которые можно сразу добавить в проект. Всё соответствует актуальным стандартам браузеров и PWA.

Типичные сценарии использования

Запуск нового сайта, когда нужно подготовить все иконки за один раз. Ребрендинг и замена фавиконов на нескольких ресурсах. Создание PWA, где нужны иконки манифеста точных размеров.

Советы для лучшего результата

Начните с квадратного изображения не менее 1024x1024 пикселей. Прозрачные PNG дают максимальную гибкость. Делайте дизайн простым — фавиконы мелкие, и мелкие детали теряются на малых размерах.

Конфиденциальность

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

Безопасность и конфиденциальность

Безопасность ваших данных — наш приоритет

Локальная обработка

Вся обработка происходит в вашем браузере

Без передачи данных

Ваши данные не отправляются на наши серверы

Без хранения данных

Данные не хранятся и не передаются

SSL-шифрование

SSL-шифрование для безопасного соединения

Next Step

Также на MoreOnlineTools