SVG в фавикон

Превратите SVG-логотип в полный набор фавиконов — favicon.ico, apple-touch-icon и иконки веб-приложений — чётко растеризованные в вашем браузере. Ничего не отправляется на сервер.

Конфиденциальность прежде всего: каждое изображение обрабатывается локально в вашем браузере. Ничего не загружается, не сохраняется и не передаётся ни на один сервер.

На входе вектор, на выходе все растровые размеры

SVG — идеальный источник для фавикона: он не зависит от разрешения, поэтому каждый размер иконки можно растеризовать из исходной геометрии, а не пересэмплировать из и без того маленького растра. Загрузите свой SVG, и каждый выходной файл — 16, 32, 48, 180, 192 и 512 пикселей — будет отрисован из вектора в его собственном размере, что сохраняет края чёткими, а не замыленными. Именно это отличает иконку, которая выглядит во вкладке продуманно, от той, что выглядит как пятно.

Почему .ico всё ещё нужен

Современные браузеры охотно используют SVG-фавикон напрямую, но старые и множество инструментов — читалки лент, распознаватели ссылок в чатах, ярлыки на рабочем столе — по-прежнему ищут favicon.ico. Создание обоих из одного SVG закрывает всё. Добавьте отступы, выберите квадратную, скруглённую или круглую маску и фон, затем скачайте полный набор с готовым к вставке HTML-фрагментом.

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

Загружается ли моё изображение для создания фавикона?
Нет. favicon.ico, PNG-иконки и манифест — всё создаётся локально в браузере с помощью Canvas API. Ваше изображение никогда не покидает устройство.
Какие размеры и файлы я получу?
Многоразмерный favicon.ico (16, 32 и 48px), PNG-иконки размером 16, 32, 48, 180 (apple-touch-icon), 192 и 512px, site.webmanifest и HTML-фрагмент для вставки в ваш <head>.
Можно ли конвертировать PNG или SVG в ICO?
Да. Добавьте PNG, JPG, SVG или WebP и скачайте настоящий favicon.ico. Логотипы SVG сначала растрируются локально в высоком разрешении.
Какое изображение подходит лучше всего?
Квадратное изображение с простым контрастным логотипом. Неквадратные изображения обрезаются по центру; используйте настройки отступа и формы, чтобы скадрировать так, как вам нужно.
Как установить фавикон?
Распакуйте пакет в корневую папку сайта и вставьте приложенный HTML-фрагмент в <head> ваших страниц. favicon.ico автоматически подхватывается большинством браузеров.