Формат favicon
Favicon — это маленькая иконка сайта, которая отображается во вкладке браузера, в закладках и истории. Размеры стандартные: 16x16, 32x32, 64x64, 180x180 или 192x192 пикселей. Форматы favicon отличаются поддержкой в браузерах: ICO — классический формат для старых браузеров, PNG — универсальный, SVG — векторный, apple-touch-icon специально для Apple и Android устройств. Каждый формат требует своих размеров и способа подключения в HTML. Код добавляется в head через link-теги с атрибутами rel, type, href и sizes. Современные браузеры поддерживают PNG и SVG, но старые версии требуют ICO. На практике используют несколько форматов и размеров одновременно для обеспечения работы. Один favicon должен работать везде — во вкладке браузера, в закладках, в истории, на главном экране мобильных устройств и даже в результатах поиска Google. Правильный favicon важен для бренда сайта — это как логотип, соответствующий основным правилам и основам дизайна, который помогает пользователям узнать проект. Выбрать нужный формат и размер — основная задача для новых разработчиков при создании любого сайта.
Основные форматы favicon на 2026 год — это PNG, ICO, SVG и WebP. Каждый из этих форматов иконки имеет свои особенности и разную поддержку браузерами.
PNG: универсальный растровый формат
PNG — самый распространённый формат для favicon среди разработчиков. Это растровое изображение с поддержкой прозрачности (альфа-канал), благодаря чему иконка может иметь прозрачный фон. Файл PNG используется в нескольких размерах: 16 на 16 пикселей для вкладки браузера, 32 на 32 пикселя для закладок и истории, 192 на 192 пикселя для мобильных устройств.
Подключение PNG-файла в head:
<link rel="icon" type="image/png" href="/favicon.png" sizes="32x32">Все современные браузеры поддерживают PNG: Chrome, Firefox, Safari, Edge, Opera. Старые версии Internet Explorer тоже работали с PNG, хотя раньше предпочитали ICO. На 2026 год количество пользователей старого IE минимально.
Растровые форматы теряют качество при масштабировании. Поэтому для PNG требуется создавать несколько размеров одного favicon и подключать их все в head-раздел с атрибутом sizes:
<link rel="icon" type="image/png" href="/favicon-16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-192.png" sizes="192x192">ICO: классический формат для старых браузеров
ICO — это родной формат иконок Windows. Файл ICO мог содержать несколько растровых изображений разных разрешений в одном файле. Браузер самостоятельно выбирал нужное изображение для вкладки браузера, для закладок, для отображения в истории.
<link rel="icon" type="image/x-icon" href="/favicon.ico">На 2026 год ICO практически не используется в новых проектах. Его держат только для поддержки очень старых браузеров — Internet Explorer 6 и более старых версий. Google Chrome и Firefox давно перешли на формат PNG и SVG. Формат ICO требовал специального парсинга в браузере, что замедляло загрузку страницы и отображение иконки сайта.
SVG: векторный масштабируемый формат
SVG (Scalable Vector Graphics) — это векторный формат иконки, который масштабируется идеально без потери качества. Одна и та же иконка SVG одинаково хорошо выглядит на маленькой вкладке браузера (16 на 16 пикселей) и на главном экране смартфона (192 на 192 пикселя).
<link rel="icon" type="image/svg+xml" href="/favicon.svg">SVG особенно полезен для адаптивных иконок, которые меняют цвет в зависимости от темы оформления. В файл SVG можно добавить CSS-стили, реагирующие на параметр prefers-color-scheme:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><style>rect { fill: black; }</style><rect width="100" height="100" /></svg>Браузеры добавили полную поддержку SVG для favicon совсем недавно. Google Chrome поддерживает с версии 96, Firefox с версии 109, Safari с версии 15.4, Edge с версии 96. Internet Explorer не поддерживает и не будет поддерживать векторный формат в качестве favicon.
WebP: современный формат с меньшим размером
WebP разработан компанией Google для замены PNG и JPEG с целью уменьшить размер файла при сохранении качества изображения. Файл favicon в формате WebP примерно на 20–30 процентов меньше по объёму, чем эквивалентный PNG.
<link rel="icon" type="image/webp" href="/favicon.webp">Современные браузеры поддерживают WebP: Chrome (версия 23+), Firefox (65+), Safari (16+), Edge. Internet Explorer не поддерживает формат WebP. Старые версии браузеров WebP не способны прочитать, поэтому как основной единственный формат favicon WebP не подходит.
Размеры иконок для разных мест использования
Favicon отображается в разных местах браузера и операционной системы, каждое место требует определённого размера. Основные размеры иконок сайта:
16×16 пикселей — для вкладки браузера. Это самый маленький размер. Иконка должна быть разборчивой и читаемой даже при таком размере.
32×32 пикселя — для закладок в браузере, для отображения в истории посещений, для адресной строки.
64×64 пикселя — для некоторых браузеров и операционных систем.
192×192 пикселя — стандартный размер для Android. Когда пользователь добавляет веб-сайт на главный экран смартфона, система ищет именно эту иконку.
512×512 пикселей — для больших экранов и прогрессивных веб-приложений.
Если используешь PNG, нужно создавать все размеры отдельными файлами и указывать их в элементе link с атрибутом sizes. Если используешь SVG, один файл работает на всех размерах, так как это векторный формат.
Apple-touch-icon для iOS и macOS
Для устройств Apple (iPhone, iPad, Mac) существует отдельный атрибут
rel="apple-touch-icon". Когда пользователь добавляет веб-сайт
на главный экран iPhone, браузер Safari ищет именно этот icon,
а не обычный favicon.
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">Размер apple-touch-icon должен быть ровно 180 на 180 пикселей. iOS сама добавит скругление углов при отображении на главном экране, поэтому скруглять углы в самом файле не нужно. Изображение должно быть на непрозрачном фоне.
Android и файл манифеста
Для Android и прогрессивных веб-приложений используется файл манифеста (manifest.json). Браузер смотрит в этот файл, когда пользователь устанавливает веб-сайт как приложение на телефон.
<link rel="manifest" href="/manifest.json">В файле manifest.json указываются иконки для разных размеров:
{ "icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
] }Совместимость форматов с браузерами на 2026 год
PNG поддерживают все современные браузеры везде: Chrome, Firefox, Safari, Edge.
ICO поддерживают все браузеры, но используется редко. Нужен только для совместимости с очень старыми системами.
SVG поддерживают Chrome (96+), Firefox (109+), Safari (15.4+), Edge (96+). Internet Explorer не поддерживает SVG.
WebP поддерживают большинство современных браузеров, но старые версии не работают. Internet Explorer не поддерживает.
Для полной совместимости со всеми браузерами и устройствами разработчики подключают несколько link-элементов одновременно. Браузер выберет то, что ему подходит. Если браузер поддерживает SVG, он возьмёт файл favicon.svg. Если нет — возьмёт PNG. На мобильных системах будет использован apple-touch-icon. На Android браузер посмотрит значения в манифесте:
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" href="/favicon.png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/manifest.json">Это гарантирует, что favicon работает везде: во вкладке браузера, в закладках, в истории, на главном экране мобильного устройства, в результатах поиска Google. Правильный favicon — это как логотип проекта, помогает пользователям узнать сайт с первого взгляда.