ICO, PNG или SVG для фавиконки: что выбрать
Вы готовите иконку для сайта и натыкаетесь на спор: одни советуют классический favicon.ico, другие — современный PNG, третьи — модный SVG. Кто прав? Спойлер: вопрос «или» поставлен неверно. Разбираем сильные и слабые стороны каждого формата и собираем набор, который выглядит идеально и в старом браузере, и на новеньком телефоне.
Почему вопрос «или» неправильный
Самое частое заблуждение — думать, что нужно выбрать один формат фавиконки. На деле эти три формата не конкуренты, а члены одной команды: каждый закрывает то, в чём слабы остальные. ICO даёт совместимость и набор мелких размеров, PNG — чёткость в современных браузерах и обязательную иконку для iPhone, SVG — векторную резкость и адаптацию к тёмной теме.
Короткий ответ
Для современной фавиконки используйте SVG там, где он поддерживается, и добавьте PNG/ICO как запасной вариант. Один ICO удобен для старых браузеров, PNG предсказуем для отдельных размеров, SVG лучше масштабируется.
Поэтому правильная постановка вопроса звучит так: сколько форматов мне реально нужно и в какой роли каждый. Чтобы ответить, разберём их по очереди — без лишней теории, по делу.
Коротко
ICO — фундамент совместимости, PNG — обязателен для iOS и старых браузеров, SVG — приятный бонус для резкости и тёмной темы. Минимум: ICO + PNG. Идеал: ICO + PNG + SVG.
ICO: совместимость и мультиразмер
ICO — это исторический формат иконок Windows и самый совместимый вариант фавиконки. Его главная суперспособность — мультиразмер: один файл хранит сразу 16×16, 32×32 и 48×48, и браузер сам берёт подходящий размер под вкладку или закладку. Подробно устройство формата мы разобрали в статье «Что такое ICO».
Второй козырь — правило по умолчанию. Браузеры запрашивают /favicon.ico из корня сайта автоматически, даже если вы не прописали ни одного тега. Это спасает старые, корпоративные и нестандартные браузеры. Минус один: ICO неудобно редактировать вручную и он не умеет менять цвет под тему.
PNG: чёткость и iOS
PNG — это привычный растровый формат со сжатием без потерь и полноценной прозрачностью. В роли фавиконки он отвечает за чёткую картинку в современных браузерах и, что важнее, за иконку на устройствах Apple: apple-touch-icon требует именно PNG (обычно 180×180).
PNG прост в подготовке: его экспортирует любой редактор, он отлично смотрится на экранах высокой плотности. Слабость — он одноразмерный: один PNG = одно разрешение. Чтобы покрыть разные места, придётся экспортировать несколько файлов, тогда как ICO упаковывает их в один.
SVG: вектор и тёмная тема
SVG — векторный формат: вместо пикселей он описывает иконку формулами линий и заливок. Отсюда два больших плюса. Первый — идеальная резкость на любом масштабе и любой плотности экрана: один файл одинаково чёток и в 16, и в 512 пикселей, а весит при этом крошечно. Второй, самый эффектный — адаптация к тёмной теме: через медиазапрос prefers-color-scheme иконка может менять цвет, оставаясь читаемой на любом фоне браузера.
Подвох — в поддержке. SVG-фавиконку понимают современные Chrome, Firefox и Edge, но Safari работает с ней ограниченно, а apple-touch-icon её вообще не принимает. Поэтому SVG — это дополнение, а не замена: только на нём фавиконку строить пока рано.
Не стройте всё на одном SVG
Соблазн «один лёгкий вектор и всё» понятен, но старые и корпоративные браузеры покажут пустую иконку, а iPhone при добавлении на экран сделает скриншот вместо логотипа. SVG добавляют поверх ICO и PNG, а не вместо них.
Сравнение в таблице
Сведём всё в наглядную таблицу — по тем критериям, которые реально важны для иконки сайта:
| Критерий | ICO | PNG | SVG |
|---|---|---|---|
| Совместимость (старые браузеры) | Отличная | Хорошая | Ограниченная |
| Несколько размеров в файле | Да | Нет | Не нужно (вектор) |
| Резкость на Retina/4K | Зависит от размеров | Зависит от размеров | Идеальная |
| apple-touch-icon (iOS) | Нет | Да | Нет |
| Смена цвета под тёмную тему | Нет | Нет | Да |
| Размер файла | Средний | Средний | Очень маленький |
Какой набор собрать в 2026
Теперь практический вывод. В зависимости от того, насколько вы перфекционист, есть три разумных уровня:
Минимум
favicon.ico (16/32/48) в корне. Работает везде, ставится за минуту.
Стандарт
ICO + PNG 32×32 + apple-touch-icon 180×180. Красиво в браузерах и на iPhone.
Идеал
То же плюс SVG с адаптацией под тёмную тему и PNG 512 для манифеста.
Заметьте: ICO присутствует на всех трёх уровнях. Это и есть фундамент, с которого начинают. Как собрать остальной набор и какие теги прописать — в подробном гайде «Как сделать favicon». А сколько именно размеров класть внутрь ICO — в статье про размеры фавиконок.
Соберите ICO для фундамента набора
Загрузите PNG-логотип — конвертер FormatZ упакует все нужные размеры в один favicon.ico. Бесплатно, в браузере, без регистрации.
Нужно вытащить картинку из готового ICO, чтобы переделать или экспортировать в другой формат? Пригодится обратный конвертер — ICO в PNG. Полный список преобразований — на странице всех форматов.
