Создать favicon для сайта
Загрузите PNG, JPG, WebP или SVG и получите готовый favicon-пакет: favicon.ico, PNG-иконки разных размеров, apple-touch-icon, site.webmanifest и HTML-код для вставки в head.
Исходное изображение
Favicon-пакет для сайта
{
"name": "MyWebSite",
"short_name": "MySite",
"icons": [
{
"src": "/web-app-manifest-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/web-app-manifest-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}Неквадратные изображения не растягиваются: иконка вписывается в квадрат пропорционально. ZIP удобно распаковать в корень сайта или в отдельную папку с favicon.
Готовый набор favicon, а не один ICO
Обычный PNG в ICO решает только часть задачи. Для сайта обычно нужны несколько размеров, manifest и понятный HTML-код.
favicon.ico
Классический ICO-файл содержит размеры 16x16, 32x32 и 48x48 для браузеров и старых требований.
PNG-иконки
Пакет включает favicon-16x16, 32x32, 96x96, apple-touch-icon 180x180 и manifest-иконки 192x192 и 512x512.
HTML и manifest
В ZIP добавляются site.webmanifest, favicon-head.html и README с готовым кодом для секции head.
Как сделать favicon из картинки
Подготовьте исходник, задайте данные сайта и скачайте ZIP-пакет.
- 1
Загрузите изображение
Выберите PNG, JPG, WebP или SVG. Лучше использовать простой логотип или знак, который читается в маленьком размере.
- 2
Заполните данные сайта
Укажите название сайта, короткое название, путь к favicon и цвета для web app manifest.
- 3
Скачайте ZIP
Инструмент создаст favicon.ico, PNG-иконки, site.webmanifest и HTML-код для вставки на сайт.
- 4
Добавьте файлы на сайт
Распакуйте пакет по выбранному пути и вставьте HTML-код из favicon-head.html в секцию head.
Что проверить перед установкой
Маленький размер
Проверьте, что знак узнаваем на 16x16 и 32x32. Тонкие линии и мелкий текст обычно теряются.
Фон и прозрачность
PNG и SVG могут сохранять прозрачность. Для JPG прозрачные поля будут недоступны, потому что исходник не содержит альфа-канал.
Путь к файлам
Если favicon лежит не в корне сайта, укажите тот же путь в настройке перед генерацией пакета.
PNG, JPG, WebP и SVG в favicon
Генератор закрывает сценарий создания favicon из картинки и не заменяет отдельные конвертеры форматов.
PNG в favicon
Хороший вариант для логотипов и иконок с прозрачным фоном.
JPG в favicon
Подходит для простых картинок без прозрачности, если исходник уже хранится как фото.
WebP или SVG
WebP можно использовать как современный растровый исходник, SVG дополнительно попадет в пакет как favicon.svg.
Частые вопросы о favicon для сайта
Коротко о favicon.ico, PNG-размерах, apple-touch-icon, manifest и установке кода на сайт.
Что входит в favicon-пакет?
В ZIP входят favicon.ico, PNG-иконки 16x16, 32x32, 96x96, apple-touch-icon 180x180, manifest-иконки 192x192 и 512x512, site.webmanifest, favicon-head.html и README.
Можно ли сделать favicon из PNG, JPG или WebP?
Да. Загрузите PNG, JPG или WebP, и инструмент создаст ICO, PNG-иконки, manifest и HTML-код для сайта.
Что будет с неквадратной картинкой?
Картинка вписывается в квадрат пропорционально, без растягивания. Свободные поля остаются прозрачными, если формат результата поддерживает прозрачность.
Чем генератор favicon отличается от PNG в ICO?
Конвертер PNG в ICO делает один ICO-файл. Генератор favicon собирает полный набор для сайта: ICO, PNG разных размеров, apple-touch-icon, manifest и HTML-код.
Куда вставлять HTML-код favicon?
Код из favicon-head.html нужно добавить в секцию head страниц сайта. Файлы из ZIP должны лежать по тому пути, который указан в href и manifest.