Поддержка HTML 5 Favicon в браузерах: Chrome, IE, Firefox

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

Чтобы добавить иконку сайта (favicon) в HTML5, пропишите в атрибут rel значения "icon" или "shortcut icon". Для указания пути к файлу favicon используйте href:

<link rel="icon" href="путь/к/favicon.ico" type="image/x-icon">

Для улучшения совместимости, добавьте иконки различных размеров и форматов:

<link rel="icon" sizes="16x16" href="путь/к/favicon-16.png">
<link rel="icon" sizes="32x32" href="путь/к/favicon-32.png">
<link rel="apple-touch-icon" sizes="152x152" href="путь/к/apple-touch-icon.png">
<link rel="icon" type="image/svg+xml" href="путь/к/favicon.svg">

Важно: размеры, указанные в атрибуте sizes, должны совпадать с реальными размерами favicon. Воспользуйтесь форматами .png и .svg для отображения изображения в высоком качестве на разных платформах.

Особенности разных браузеров

Необходимо учесть особенности работы различных браузеров. Вот некоторые ключевые нюансы:

Internet Explorer Версия 11: PNG-сага

Ранее Internet Explorer (IE) не поддерживал использование PNG для favicon, но в 11 версии это изменилось. Для IE9 и более ранних версий используйте условные комментарии для вставки .ico favicon размером 32x32 пикселя.

<!--[if IE]><link rel="shortcut icon" href="путь/к/favicon.ico"><![endif]-->

Подробнее об этом расскажет наш спикер на видео

Microsoft Tile Story: Новое начало

IE11 и Edge позволяют создавать индивидуальные плитки для Windows 8.1 и более поздних версий. Для этого свяжите файл .xml с Windows, чтобы добавить метаданные, нужные для создания плиток на стартовом экране.

<meta name="msapplication-TileColor" content="#fefefe">
<meta name="msapplication-TileImage" content="mstile-144x144.png">
<meta name="msapplication-config" content="browserconfig.xml">

Адаптация под мобильные устройства – важный аспект!

Учитывайте рост аудитории мобильных устройств и не забывайте про apple-touch иконки и иконки в manifest.json для правильного отображения сайта на главном экране. apple-touch-icon не должен иметь атрибут `rel="apple-touch-icon-precomposed", поскольку он уже устарел в iOS; сейчас устройства обрабатывают иконки самостоятельно.

<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="manifest" href="site.webmanifest">

Особенности нишевых браузеров

Opera Coast, Google TV и другие нишевые браузеры требуют favicon определенных размеров, например 228x228 или 96x96 пикселей. Рекомендуем ознакомиться с документацией, чтобы узнать требования каждого из этих браузеров.

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

Можно представить поддержку браузерами HTML5 Favicons как набор криптовалют:

Биржа Браузеров Криптовалютной Поддержки 🎆

| Браузер            | Bitcoin    | Ethereum    | Dogecoin |
| ------------------ | ---------- | ----------- | -------- |
| Chrome             | ✅| ✅|          ✅|
| Firefox            | ✅| ✅|          ❌|
| Safari             | ✅| ❌|          ❌|
| Edge               | ✅| ✅|          ✅|
| Internet Explorer  | ❌| ❌|          ❌|

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

Bitcoin: .ico
Ethereum: .png / .gif
Dogecoin: Экспериментальные форматы, например .svg

Стратегия Favicon для всей сети

Чтобы максимально приспособить favicon к разным условиям, следуйте этим рекомендациям:

Favicon для каждого браузера

Предоставьте доступность .ico файла для старых браузеров и .png версию для более новых. Так каждый браузер сможет адекватно отобразить вашу иконку.

<link rel="icon" href="путь/к/favicon.ico" sizes="32x32">
<link rel="icon" href="путь/к/favicon.png" sizes="192x192">

Готовность к работе с нишевыми устройствами

Устройства, такие как Windows Phone, требуют квадратных изображений размером 768x768 пикселей для закрепления на стартовом экране. Имейте в виду:

<meta name="msapplication-TileImage" content="путь/к/zzz-768x768.png">

Обязательно отслеживайте изменения веб-стандартов, они могут быть так же динамичны, как сюжеты ваших любимых сериалов. Кейс с apple-touch-icon-precomposed является хорошим примером изменчивости требований.

Указывайте размеры иконки, этим вы поможете браузерам, которые не поддерживают соответствующий атрибут, выбрать оптимальный вариант для отображения.

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

1. HTML Стандарт — Ваше руководство по типам ссылок согласно последней версии HTML стандарта.
2. Can I use... Support tables for HTML5, CSS3, etc — Инструмент для отслеживания совместимости браузеров в отношении favicon.
3. Что в заголовке? Метаданные в HTML – Обучение веб-разработке | MDN — Руководство MDN по добавлению пользовательских иконок на ваш сайт.
4. GitHub – audreyfeldroy/favicon-cheat-sheet — Шпаргалка с подробным описанием размеров и типов favicon для идеальной подготовки.
5. rel="shortcut icon" considered harmful · Mathias Bynens — Подробная информация о лучших практиках favicon и распространенных ошибках.
6. Favicon Generator for perfect icons on all browsers — Оптимизируйте ваши иконки под все устройства и браузеры с помощью этого удобного генератора.