Изображения, SVG и значки
Перетащите логотип или готовый .ico, проверьте вкладку в 16 px и скачайте весь набор.
Перетащите сюда файл PNG, JPG, WebP, GIF, SVG или ICO либо вставьте картинку из буфера обмена.
Изображения читаются и масштабируются в этой вкладке браузера и никуда не отправляются.
Выберите, перетащите или вставьте изображение, чтобы начать.
Выберите, перетащите или вставьте изображение, чтобы начать.
Запуск сайта, смена логотипа или замечание Lighthouse заканчиваются одинаково: логотип один, а нужны полдюжины файлов значков и теги link, которые на них ссылаются. Этот генератор фавиконов делает актуальный набор из одной исходной картинки, и не нужно шесть раз уменьшать одно и то же изображение в редакторе.
Работает и в обратную сторону. Перетащите доставшийся от старого проекта favicon.ico — увидите все размеры внутри, сможете сохранить каждый как PNG, а самый крупный станет исходником для недостающих значков Apple и Android.
Он делает то, что браузеры и телефоны запрашивают сегодня, и ничего из того, что им давно не нужно.
Многоразмерный favicon.ico, PNG на 16 и 32 px, apple-touch-icon на 180 px, значки Android на 192 и 512 px и site.webmanifest получаются из одного изображения. HTML-теги указывают на ваш настоящий путь, так что сайту в /static/ не нужны шесть ручных правок.
Перетащите существующий favicon.ico — каждое вложенное изображение появится в списке с реальными размерами, глубиной цвета, кодированием PNG или BMP и объёмом в байтах. Сохраните любое как PNG или все сразу в ZIP, не ища другой сайт.
iOS подкладывает под прозрачные значки чёрный цвет. Поэтому apple-touch-icon всегда заливается вашим цветом фона и остаётся квадратным — скругление iOS накладывает сам. Значки для браузера сохраняют прозрачность.
SVG или квадратный PNG от 512 px дают самый чёткий результат. Неквадратная картинка ставится по центру, а не обрезается, а растровое изображение меньше 512 px получает предупреждение с реальным размером — иначе значок Android на 512 px окажется растянутым.
Набор пересоздаётся примерно через 300 мс после каждого изменения. Смотрите на светлую и тёмную вкладки и на увеличение ×4: тонкие линии и мелкий текст на 16 px пропадают. Широким логотипам помогает небольшой отступ; скругление действует только на значки браузера и Android.
Путь попадает в каждый тег link и в каждый src значков в manifest. Если файлы будут лежать в /assets/icons/, впишите его первым делом, затем скачайте ZIP и вставьте HTML в head страниц.
favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png и site.webmanifest, плюс favicon.svg, если исходник — SVG. Все файлы лежат в корне архива и копируются рядом с главной страницей.
В ICO можно собрать любую комбинацию из 16, 24, 32, 48, 64, 128 и 256 px; внутри хранятся данные PNG, которые читают все современные браузеры и Windows. Так что генератор фавиконов работает ещё и как конвертер PNG в ICO.
Формат определяется по байтам, а не по расширению, а предупреждения называют реальные ширину и высоту. SVG никогда не считается слишком маленьким — он масштабируется без потерь.
Теги link, meta theme-color и список значков в manifest строятся из одного пути и одних цветов, поэтому HTML никогда не ссылается на файл, которого нет в архиве.
Для современных браузеров и телефонов: favicon.ico с 16, 32 и 48 px, PNG на 16 и 32 px, apple-touch-icon на 180 px и значки 192 и 512 px в site.webmanifest. Ровно это генератор фавиконов кладёт в ZIP.
Возьмите квадратный логотип или SVG, перетащите сюда, проверьте вкладку в 16 px, укажите путь и скачайте ZIP вместе с HTML. Всё происходит в браузере, регистрация не нужна — создать фавикон можно за минуту.
Лучше в корень сайта: некоторые браузеры, RSS-читалки и роботы запрашивают /favicon.ico даже без тега link. Остальные файлы можно держать в подпапке, если путь указан верно.
Перетащите PNG, отметьте нужные размеры внутри ICO и нажмите «Скачать favicon.ico». Получится настоящий многоразмерный ICO, а не PNG с изменённым расширением.
Браузеры очень долго кешируют фавиконы: обновите страницу без кеша или откройте приватное окно. Затем проверьте, что href в каждом теге link совпадает с реальным расположением файлов; если указать путь до копирования HTML, расхождения не будет.
Google рекомендует квадратный значок со стороной, кратной 48 px, а Яндекс берёт favicon.ico или PNG-значок, объявленный в теге link. ICO по умолчанию содержит 48 px, а значки 192 и 512 px тоже кратны 48, так что набор подходит обоим.
Не хватает размера или платформы?
Перетащите логотип в генератор фавиконов, проверьте вкладку в 16 px на светлом и тёмном фоне и перенесите ZIP и теги head на сайт.
Сохраните исходный файл логотипа для будущих правок.