Выберите графику
Загрузите SVG — так иконки будут самыми четкими и появится SVG-favicon — или PNG, JPG, WebP или HEIC. Если вы вошли в аккаунт, можно выбрать один из разблокированных результатов.
Генератор Favicon и иконок PWA
Одна загрузка — все иконки для вкладки браузера и главного экрана, плюс теги, которые на них ссылаются.
Создайте набор favicon
SVG, PNG, JPG, WebP, HEIC · до 8 МБ · бесплатно для ваших файлов и разблокированных результатов
Что делает инструмент
Создает из одного изображения все иконки, которые нужны сайту: favicon.ico, favicon в PNG, SVG-favicon (из SVG), Apple touch icon на вашем цвете фона и иконки веб-приложения — включая maskable, которые остаются четкими, когда телефон обрезает их под свою форму. В ZIP также есть site.webmanifest и favicon.html с тегами, которые нужно вставить в страницы. Из PNG, JPG, WebP или HEIC получаются все иконки, кроме SVG-favicon: этот инструмент не векторизует изображения.
Ради безопасности удаляются скрипты, анимация, встроенный веб-контент, ссылки и всё, что загружает другие файлы; ваша графика и встроенные изображения PNG, JPEG или WebP остаются. В результате указано, что было удалено.
Вход, результат и ограничения
На входе
SVG, PNG, JPEG, WebP или HEIC
На выходе
ZIP с favicon.ico, favicon в PNG, SVG-favicon (для SVG-исходников), Apple touch icon, иконками PWA, site.webmanifest и HTML-тегами
Ограничения
Файлы до 8 МБ; изображения PNG, JPG и WebP — до 24 Мп, перед экспортом масштабируются до 1 536 px. Создается favicon.ico с изображениями 16, 32, 48 px, PNG-favicon 16 и 32 px, Apple touch icon 180 px и иконки приложения 192 и 512 px — каждая также в виде maskable-иконки, у которой графика остается в безопасной зоне (круг по центру радиусом 40% от размера иконки). Лимит обработки: 30 с.
Как это работает
Дайте название и выберите цвета
Название и короткое имя попадают в веб-манифест. Цвет темы — оттенок, которым некоторые браузеры окрашивают свой интерфейс; цвет фона заливает Apple touch icon и maskable-иконки.
Загрузите файлы и вставьте теги
Положите все файлы из ZIP в папку, которую вы указали как префикс пути, а затем вставьте теги из favicon.html в head каждой страницы. В README из ZIP сказано, для чего нужен каждый файл.
Решение проблем
Почему нет favicon.svg?
SVG-favicon делается только из SVG, который целиком состоит из векторной графики. Для PNG, JPG, WebP, HEIC или SVG со встроенной картинкой вместо него создаются favicon в PNG и ICO — и в результате об этом сказано.
Всё еще видна старая иконка
Браузеры долго хранят favicon в кэше. Чтобы увидеть новые файлы, откройте страницу в режиме инкогнито или очистите данные сайта.
Логотип выглядит мелким в maskable-иконке
Лаунчеры могут обрезать maskable-иконку до круга, поэтому графика масштабируется под круглую безопасную зону. Уменьшите отступ, чтобы сделать ее крупнее; круглый знак может заполнить весь круг.
Меняет ли префикс пути манифест?
Нет. Пути к иконкам в site.webmanifest указаны относительно манифеста, поэтому работают из любой папки, если файлы лежат вместе. Префикс задает пути в favicon.html.
Доступ и цены
Этот инструмент не тратит кредиты, если применять его к загруженному файлу или уже разблокированному результату. Файлы хранятся 24 часа у гостей и 30 дней в аккаунте. См. цены.