Современные стандарты favicon: размеры, форматы (svg, ico, png)

Быстрый ответ

Для обеспечения надёжной работы в большинстве браузеров используйте SVG-файл. Также предусмотрите ICO-формат в поддержку старых версий браузеров. Кроме того, добавьте PNG-версию размером 48x48 пикселей. Пример кода с универсальным набором иконок сайта представлен ниже:

<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="icon" type="image/x-icon" href="favicon.ico"><!-- IE ещё жив! -->
<link rel="icon" type="image/png" href="favicon.png" sizes="48x48">

Данная комбинация обеспечивает широкую поддержку и сохранение качества изображений на различных устройствах и в браузерах.

Создание мультиплатформенного присутствия

Используйте несколько размеров иконок, ибо различные платформы имеют свои особенности. К разработке иконок следует подходить исходя из их требований.

iOS: внимание к деталям от Apple :apple:

На устройствах Apple и в браузере Safari предпочтительнее использовать PNG-иконку размером 180x180 пикселей, и желательно без прозрачности.

<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">

Здесь прозрачность неуместна!

Предпочтения Android :robot:

Для Android Chrome идеально подходит PNG-иконка размером 192x192 пикселей с прозрачностью. Также используйте Манифест веб-приложения для дополнительного контроля над внешним видом.

<link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png">
<link rel="manifest" href="site.webmanifest">

Android приветствует прозрачность. Почувствуйте себя как дома!

Классика для настольных браузеров :desktop_computer:

Для настольных браузеров актуален проверенный временем формат ICO, в который включаются различные размеры иконок от 16x16 до 48x48 пикселей.

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">

Десктопные браузеры по-прежнему ценят классику!

Дисплеи с высоким разрешением :iphone:

Retina-дисплеи требуют иконок размером 167x167 пикселей для оптимального воспроизведения.

Визуализация

Воспринимайте иконки вашего сайта как галерею картин, каждая из которых идеально вписывается в «раму» соответствующего устройства.

Каждый формат иконки особенно подчеркивает индивидуальность сайта на разных платформах.

Учёт требований социальных сетей и SEO

Визуальная идентификация влияет на распространение контента в социальных сетях и на его позиционирование в поисковых системах.

Совместимость с социальными сетями :bird: :book:

Для совместимости с Facebook и Twitter выбирайте форматы PNG или JPG вместо SVG.

<meta name="twitter:card" content="summary_large_image">
<meta property="og:image" content="example.png">

Facebook и Twitter всё ещё не обзавелись поддержкой SVG, им требуется больше времени.

Лучший визуальный эффект достигается с изображениями размером 1300x650 пикселей.

Волшебство SEO :mag:

Google предпочитает иконки размером 48x48 пикселей или кратные им, так как они отображаются чётко в виде миниатюры.

<link rel="icon" type="image/png" href="favicon.png" sizes="96x96">

Google обожает большие чёткие изображения.

Экосистема Microsoft :blue_square:

Если ваша аудитория активно использует продукты Microsoft, стоит задуматься о создании файла browserconfig.xml для поддержки браузеров Edge и IE.

Полезные материалы

1. RealFaviconGenerator — для создания иконок и проверки их совместимости.
2. Favicon Generator — для конвертации изображений в иконки.
3. ❍ IcoMoon App — для создания иконочных шрифтов и пакетов иконок.
4. Руководство по фавиконам от CSS-Tricks — полный комплект необходимой информации.
5. Документация MDN — описание способов задания типов ссылок в HTML.
6. Основы веб-разработки от Google — настройка интерфейса браузера и иконок.
7. Can I Use — таблицы поддержки функций различными браузерами.