SVG-фавиконы: почему они лучше и как их использовать

Вот в чём дело с фавиконами: мы застряли с пикселизированными ICO-файлами с 1999 года. Двадцать пять лет размытых маленьких иконок. А SVG-фавиконы? Они, честно говоря, потрясающие — и большинство разработчиков до сих пор их не используют.

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

Почему SVG-фавиконы того стоят

Бесконечное масштабирование без размытия

Помните создание пяти разных размеров PNG для фавикона? 16x16, 32x32, 48x48... надоедает быстро. С SVG вы создаёте один файл. И всё. Он выглядит чётко — и при 16 пикселях во вкладке браузера, и при 512 пикселях на заставке PWA.

Типичный SVG-фавикон весит 300-800 байт. Сравните с пакетом PNG-фавиконов в 2-5 КБ. Это экономия 85-95%. Не гигантская в абсолютных цифрах, но каждый байт на счету при оптимизации.

Тёмная тема, которая просто работает

Это убийственная функция. С SVG-фавиконом можно встроить CSS-медиазапросы прямо в файл. Когда пользователь переключается на тёмную тему, фавикон автоматически адаптируется.

Вот как это выглядит на практике:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) {
      path { fill: #ffffff; }
    }
  </style>
  <path d="M16 4L4 28h24L16 4z"/>
</svg>

Это простой треугольник, который тёмный на светлом фоне и светлый на тёмном. Никакого JavaScript. Никакого серверного определения. Просто работает.

CSS-стилизация и анимация

Поскольку SVG — это по сути XML со стилями, можно делать то, что невозможно с растровыми форматами:

Менять цвета при наведении (в поддерживаемых контекстах)
Добавлять тонкие анимации
Использовать CSS-переменные для тематизации
Изменять стили через JavaScript

Я бы не стал злоупотреблять анимацией в фавиконе — это раздражает. Но иметь такую возможность приятно.

Ситуация с поддержкой браузерами

Будем честны: поддержка SVG-фавиконов не идеальна. Вот реальность на 2025 год:

Полная поддержка:

Chrome 80+ (десктоп и Android)
Firefox 41+
Edge 80+
Opera 44+
Samsung Internet 13+

Нет поддержки:

Safari (и десктопный, и iOS)
Internet Explorer
Android Browser

Safari — главная проблема. Браузер Apple до сих пор не поддерживает SVG-фавиконы, что означает, что примерно 20% пользователей не увидят вашу SVG-иконку. Нужен запасной вариант.

Правильная реализация SVG-фавиконов

Базовая настройка с запасными вариантами

Вот разметка, покрывающая всех:

<head>
  <!-- ICO-запасной для очень старых браузеров -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">

  <!-- SVG для современных браузеров -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">

  <!-- PNG-запасной для Safari -->
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

  <!-- Apple Touch Icon (Safari не будет использовать ваш SVG) -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>

Порядок важен. Браузеры парсят эти теги последовательно и используют последний поддерживаемый. Современные браузеры возьмут SVG, Safari — PNG, а древние — ICO.

Совет: предотвращение загрузки ICO в Chrome

Chrome иногда скачивает ICO, даже когда SVG доступен. Добавьте sizes="32x32" к вашей ICO-ссылке — это подскажет Chrome, что ICO только для этого конкретного размера, и он предпочтёт масштабируемый SVG.

Создание адаптивного SVG для тёмной темы

Вот более полный пример:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .icon-bg { fill: #ffffff; }
    .icon-fg { fill: #000000; }

    @media (prefers-color-scheme: dark) {
      .icon-bg { fill: #1a1a1a; }
      .icon-fg { fill: #f0f0f0; }
    }
  </style>

  <circle class="icon-bg" cx="16" cy="16" r="15"/>
  <text class="icon-fg" x="16" y="21"
        text-anchor="middle"
        font-family="system-ui"
        font-weight="bold"
        font-size="18">F</text>
</svg>

Это создаёт круглую иконку с буквой, которая инвертирует цвета в зависимости от системных предпочтений.

Реальная проверка размера файлов

Иногда утверждают, что SVG всегда меньше. Это не совсем так. Вот как обстоят дела:

Простые геометрические иконки: SVG выигрывает, часто значительно
Сложные иллюстрации: PNG может быть даже меньше
Фотографии или детализированная графика: не используйте их как фавиконы

Для типичных фавиконов в стиле логотипа (формы, буквы, простая графика) SVG почти всегда лучший выбор по размеру файла.

Советы по оптимизации

Перед публикацией SVG-фавикона пропустите его через SVGOMG или аналогичный оптимизатор. Инструменты экспорта, такие как Illustrator и Figma, добавляют много лишнего — метаданные, комментарии редактора, избыточную точность координат.

Хорошая оптимизация может уменьшить размер SVG на 50-70%.

Также держите дизайн простым. Сложные градиенты, фильтры и сотни путей не только увеличивают размер файла — они могут вызывать задержки рендеринга.

Важный нюанс определения темы

Медиазапрос prefers-color-scheme внутри SVG следует за предпочтением операционной системы, а не настройкой темы браузера. Если кто-то использует macOS в тёмной теме, но браузер настроен на светлую, фавикон всё равно будет в стиле тёмной темы.

Это соответствует тому, как большинство сайтов обрабатывают тёмную тему, но об этом стоит знать.

Стоит ли переходить на SVG?

Если ваш текущий фавикон — простая форма или буквенный знак, SVG, вероятно, того стоит. Вы получаете:

Один файл вместо многих
Автоматическую поддержку тёмной темы
Меньший общий размер файлов
Масштабируемость на будущее

Если ваш фавикон — детальная иллюстрация или у вас много пользователей Safari, оставьте PNG как основной формат.

Лучший подход для большинства сайтов? Используйте оба. SVG для браузеров, которые поддерживают, PNG — для остальных. Дополнительные 5 минут на настройку обеспечат 100% покрытие пользователей.

Краткий чек-лист реализации

[ ] Создайте SVG-фавикон (держите простым)
[ ] Добавьте медиазапрос для тёмной темы при необходимости
[ ] Оптимизируйте через SVGOMG
[ ] Создайте PNG-запасной (минимум 32x32)
[ ] Создайте apple-touch-icon.png (180x180)
[ ] Добавьте правильные теги link с порядком запасных вариантов
[ ] Протестируйте в Chrome, Firefox и Safari

Это, по сути, всё. SVG-фавиконы не сложны — они просто недоиспользуются. Попробуйте их в следующем проекте.

Ссылки

Can I Use - SVG Favicons — Данные о совместимости SVG-фавиконов с браузерами
Building an Adaptive Favicon - web.dev — Руководство Google по созданию адаптивных фавиконов
SVG Favicons and All the Fun Things We Can Do With Them - CSS-Tricks — Исчерпывающее исследование возможностей SVG-фавиконов
How to Favicon in 2025 - Evil Martians — Практическое руководство по современной реализации фавиконов