BuildFavicon
Русский

Фавикон из SVG

Превратите логотип в SVG в favicon.svg, favicon.ico и все размеры PNG, плюс HTML-код для всех браузеров.

Перетащите SVG сюда

Исходный SVG сохраняется как favicon.svg, а из него создаются ICO и все PNG.

Ваш сайт
Другая вкладка
Ваш сайт
Другая вкладка

Выберите SVG-файл — здесь появятся фавиконы всех размеров.

Как сделать фавикон из SVG

  1. Выберите логотип в формате SVG.
  2. При желании добавьте отступ, скругление или фон (применяются к PNG и ICO).
  3. Скачайте архив. В нём favicon.svg (ваш исходный файл), favicon.ico и все размеры PNG.
  4. Загрузите файлы в корень сайта и вставьте HTML-код — строка для SVG уже включена.

Почему стоит использовать SVG-фавикон

  • Всегда чёткий. SVG масштабируется под любой размер и экран.
  • Маленький файл. Простой логотип часто весит меньше 1 КБ.
  • Тёмная тема. В SVG можно добавить медиазапрос prefers-color-scheme, чтобы иконка меняла цвет в тёмной теме.

Chrome, Edge, Firefox и современный Safari поддерживают SVG-фавиконы. Старые браузеры и некоторые сервисы ищут favicon.ico, поэтому в архиве есть оба файла.

Вопросы и ответы

Нужен ли favicon.ico, если есть SVG?

Да, оставьте favicon.ico как запасной вариант. В HTML-коде SVG указан первым, поэтому современные браузеры используют его.

SVG получается пустым.

SVG, который подгружает внешние шрифты или картинки, нарисовать нельзя. Переведите текст в кривые и встройте изображения в редакторе, затем попробуйте снова.