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

Загрузите ваш логотип или иконку и скачайте все стандартные размеры фавиконок в виде PNG. Включает Apple Touch Icon и иконки PWA. Ничего не покидает ваше устройство.

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

Генератор фавиконов берёт предоставленное изображение и изменяет его размер до стандартных размеров фавиконов с помощью Canvas drawImage API: 16x16, 32x32, 48x48, 180x180 (иконка Apple Touch), 192x192 (Android Chrome) и 512x512 (манифест PWA). Все шесть размеров генерируются в браузере, а также многоразмерный favicon.ico, объединяющий изображения 16x16, 32x32 и 48x48 в один файл для старых браузеров. Исходное изображение никогда не покидает устройство.

Полный набор фавиконов охватывает все варианты: иконки вкладок браузера, закладки, ярлыки главного экрана и экраны загрузки PWA. Использование высококачественного исходного изображения (не менее 512x512 пикселей) даёт алгоритму уменьшения масштаба больше деталей. HTML-теги link для ссылки на каждый созданный файл показаны в фрагменте кода, который можно скопировать непосредственно в тег head страницы.

Автор: Bastien Sulyan

Генератор фавиконок: пошаговая инструкция

Перетащите исходное изображение в область загрузки. Для наилучшего результата используйте квадратное изображение размером 512 пикселей или больше.
Просмотрите шесть сгенерированных размеров в панели результатов.
Скачайте шесть PNG-файлов и favicon.ico из панели результатов.
Скопируйте HTML-фрагмент, содержащий теги link для всех размеров.
Разместите PNG-файлы в корне сайта и вставьте теги link в тег head страницы.

Частые сценарии использования

Разработчик создаёт новый сайт и нужны все размеры фавиконов из логотипа бренда без подписки на дизайн-инструмент.
Автор PWA создаёт иконки 192x192 и 512x512, необходимые в манифесте веб-приложения для установки на главный экран.
Блогер обновляет идентичность сайта и заменяет фавикон по умолчанию на пользовательскую иконку из логотипа.
Фрилансер быстро создаёт полный набор фавиконов для клиентского проекта без ожидания установки офлайн-дизайн-программы.

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

Какие форматы изображений можно использовать в качестве источника?

В качестве входного данного работает любой формат, который браузер может декодировать: JPEG, PNG, WebP, GIF и SVG. Для SVG-источников браузер растеризует вектор на Canvas перед изменением размера, поэтому выходные PNG являются растровыми изображениями в любом случае.

Почему фавикон размытый во вкладке браузера?

Размеры 16x16 и 32x32 очень маленькие. Если исходное изображение содержит тонкие детали или линии, они не переживут уменьшение масштаба. Простой, чёткий дизайн с ясными формами работает намного лучше при маленьких размерах, чем сложная иллюстрация.

Создаёт ли инструмент ICO-файлы?

Да. Помимо шести PNG инструмент собирает favicon.ico, объединяющий изображения 16x16, 32x32 и 48x48 в одном файле: именно его до сих пор ищут в корне сайта старые браузеры Windows и некоторые краулеры. Современные браузеры прекрасно обходятся PNG-ссылками, поэтому публикация обоих форматов ничего не стоит и оставляет выбор за клиентом.

Обрабатывается ли исходное изображение на сервере?

Нет. Вызовы Canvas drawImage, создающие каждый размер, выполняются в вкладке браузера. Исходное изображение считывается с локального диска, шесть PNG-результатов создаются в памяти и предлагаются для скачивания. Данные файла не проходят через сервер.

Какой размер использовать для иконки Apple Touch?

iOS и iPadOS используют PNG размером 180x180 пикселей, указанный тегом link apple-touch-icon. Этот размер используется, когда пользователь добавляет сайт на главный экран Apple-устройства. Инструмент создаёт этот файл вместе с остальными размерами.

Можно ли использовать прямоугольное изображение в качестве источника?

Да, но результат будет с чёрными полосами для вписывания в квадратный Canvas. Для наилучшего результата начните с квадратного изображения или обрежьте источник до квадрата перед использованием инструмента.

Руководства и статьи об этом инструменте

Создание favicon из PNG