Конвертер фавиконов
Создайте из одного растрового изображения файлы, необходимые для добавления фавикона на сайт. Выберите способ размещения исходника на квадратном холсте и фон, а затем скачайте ZIP с многоразмерным ICO, семью значками PNG, манифестом веб-приложения, конфигурацией плитки Windows и готовым для копирования HTML-кодом для head. Преобразование изображения и сборка ZIP выполняются локально в браузере.
Как преобразовать изображение в комплект фавиконов
-
1
Выберите растровое изображение
Выберите PNG, JPEG или WebP, соответствующий указанным ограничениям на размер файла и разрешение. SVG, GIF и AVIF не поддерживаются.
-
2
Выберите способ вписывания
Режим «Заполнить и обрезать» заполняет квадрат с обрезкой краёв, а «Вписать с полями» сохраняет изображение целиком и добавляет поля вокруг него.
-
3
Настройте фон
Выберите фон для прозрачных пикселей и полей, создаваемых при вписывании, а затем проверьте полученные миниатюры.
-
4
Скачайте и установите
Скачайте ZIP, разместите значки и файлы конфигурации на сайте и скопируйте предоставленные теги link в head документа.
Содержимое ZIP
| Файл комплекта | Назначение |
|---|---|
favicon.ico |
Один контейнер ICO с вариантами 16, 32, 48 и 256 px для браузеров и программ, запрашивающих традиционный путь фавикона |
favicon-16x16.png |
Компактный PNG для вкладок браузера и других небольших областей |
favicon-32x32.png |
Значок повышенной плотности для вкладок и закладок |
favicon-48x48.png |
Дополнительный размер для рабочего стола и ярлыков |
mstile-150x150.png |
PNG 150 x 150, на который ссылается конфигурация плитки Windows |
apple-touch-icon.png |
PNG 180 x 180 для ссылок на домашнем экране устройств Apple |
android-chrome-192x192.png |
Значок приложения 192 x 192, указанный в манифесте веб-приложения |
android-chrome-512x512.png |
Значок приложения 512 x 512, указанный в манифесте веб-приложения |
site.webmanifest |
Метаданные JSON со ссылками на значки 192 px и 512 px для совместимых браузеров |
browserconfig.xml |
Конфигурация плитки Windows со ссылками на созданные значки |
favicon-head.html |
Готовые для копирования теги, связывающие страницу с ICO, PNG, значком Apple, манифестом и конфигурацией браузера |
Файлы ICO и PNG разделены намеренно. Браузеры и операционные системы выбирают значки по-разному, поэтому полный комплект обслуживает и традиционный запрос /favicon.ico, и явные современные объявления значков.
Теги для HTML head
В скачанный комплект входит фрагмент следующего вида:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-config" content="/browserconfig.xml">
Если файлы находятся в подкаталоге или на отдельном сервере ресурсов, измените пути перед вставкой тегов в <head>. Имена и пути внутри site.webmanifest и browserconfig.xml должны соответствовать размещённым файлам.
Заполнение, вписывание и выбор фона
- Заполнить и обрезать заполняет изображением весь квадрат. У широкого или высокого исходника с противоположных краёв обрезается одинаковая часть, поэтому важные элементы лучше располагать ближе к центру.
- Вписать с полями сохраняет исходник целиком. Свободное место становится полями выбранного цвета.
- Фон можно оставить прозрачным или задать сплошной цвет. В режиме вписывания он также определяет цвет полей вокруг изображения. Перед публикацией проверьте миниатюры на светлом и тёмном фоне страницы.
Чтобы маленькие значки были максимально чёткими, начните с простого квадратного изображения размером не менее 512 x 512 пикселей. Тонкие надписи, линии и мелкие детали могут исчезнуть в варианте 16 px даже при большом исходнике.
Ограничения ввода и размещение
Конвертер принимает только растровые изображения PNG, JPEG и WebP. Он проверяет сигнатуру изображения и отклоняет SVG, GIF, AVIF и другие неподдерживаемые форматы. Размер исходного файла не должен превышать 20 МиБ, длина каждой стороны должна быть не больше 8 192 пикселей, а общее разрешение не больше 24 мегапикселей. Размеры проверяются до полного декодирования изображения.
После скачивания распакуйте ZIP и загрузите созданные файлы по путям, указанным в HTML-коде. Пути от корня, например /favicon.ico, подразумевают, что файлы доступны в корне текущего домена. При замене существующего фавикона очистите кеш сайта или CDN, поскольку браузеры часто хранят значки дольше обычных ресурсов страницы.
Манифест содержит метаданные значков, но сам по себе манифест с комплектом значков не делает сайт устанавливаемым прогрессивным веб-приложением. Возможность установки также зависит от страницы, безопасности соединения и требований конкретного браузера.
Часто задаваемые вопросы
Можно использовать PNG, JPEG или WebP. Конвертер проверяет сигнатуру файла, а не только его имя, и отклоняет SVG, GIF, AVIF и другие форматы.
Заполнение масштабирует изображение так, чтобы квадрат был заполнен, и при неквадратных пропорциях одинаково обрезает противоположные края. Вписывание сохраняет всё изображение и заполняет оставшуюся часть квадрата выбранным цветом фона.
ICO представляет собой контейнер, способный хранить несколько небольших размеров значка в одном традиционном файле фавикона. Отдельные PNG дают браузерам и платформам ресурсы заданного размера для вкладок, ссылок на домашнем экране и значков приложений. Оба формата расширяют практическую совместимость.
Нет. Манифест описывает созданные значки приложения и связанные с отображением метаданные, но возможность установки зависит от дополнительных требований браузера и от того, как создан и обслуживается сам сайт.
Предоставленный HTML-код использует пути от корня, поэтому проще всего поместить распакованные файлы в корень домена. Если используется другая папка или сервер ресурсов, измените пути в HTML-коде, манифесте и конфигурации браузера.
Нет. Изображение обрабатывается и ZIP создаётся в браузере. В пошаговом режиме черновик IndexedDB может хранить изображение в этом браузере до 30 минут, чтобы передавать его между шагами. Такая локальная передача не является загрузкой на сервер.
Сопутствующие инструменты
Генератор мемов
Создавайте мемы по популярным шаблонам вроде Drake, Distracted Boyfriend или Doge либо загружайте свое изображение. Верхний и нижний текст, шрифт Impact, обводка и тень.
Генератор QR-кодов
Создавайте QR-код из текста или URL в браузере и скачивайте его в PNG.
Изменение размера изображений
Меняйте размер изображений до точных пиксельных размеров или процентов, сохраняя пропорции. Подходит для пакетной подготовки, без загрузки файлов.
Генератор штрихкодов
Создавайте сканируемые 1D штрихкоды в Code 128, Code 39, EAN-13, UPC-A, ITF-14 и Codabar. Экспортируйте в PNG, SVG или PDF для печати.
Создание GIF
Преобразуйте серию изображений или короткое видео в анимированный GIF. Настройте частоту кадров, повторы и размер перед экспортом.
WebP в JPG
Конвертируйте изображения WebP в JPG/JPEG прямо в браузере. Выберите качество, объедините прозрачность с цветом фона и скачайте без загрузки файлов на сервер.