HTML 5 Favicon - поддержка?

Я читал страницу Фавикон в Википедии. Они упоминают спецификацию HTML 5 для Favicon:

Текущая спецификация HTML5 рекомендует указывать значки размера в нескольких размерах, используя атрибуты rel = "icon" sizes = "разделенный пробелами список размеров значков" внутри тега. [ источник ] Несколько форматов значков, включая форматы контейнеров, такие как файлы Microsoft .ico и Macintosh .icns, а также масштабируемая векторная графика, могут быть предоставлены путем включения типа содержимого значка в виде type = "file content-type" в тег.

Глядя на цитируемую статью (W3), они показывают этот пример:

<link rel=icon href=favicon.png sizes="16x16" type="image/png">
<link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
<link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
<link rel=icon href=iphone.png sizes="57x57" type="image/png">
<link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">

Мой вопрос: поддерживают ли браузеры метод HTML 5?

Примечание. Я знаю, что Apple использует apple-touch-iconметод метатегов вместо метода HTML5.

Статья в Википедии утверждает:

Тем не менее, веб-браузер Google Chrome выберет наиболее подходящий размер из тех, которые указаны в заголовках HTML, для создания значков приложений размером 128 × 128 пикселей, когда пользователь выбирает «Создать ярлыки приложений ...» в меню «Инструменты».

Как Internet Explorer (v9 до v11) и Firefox справляются с этим? Верна ли статья о том, как Chrome обрабатывает HTML-иконки? (Для Chrome нет источника, подтверждающего это.)

В поиске я не смог найти какую-либо (достоверную) информацию о Favicon в HTML 5, кроме статьи в Википедии.

Предоставленные ответы (на момент публикации) являются только ссылками, поэтому я подумал, что суммирую ссылки в ответ и то, что я буду использовать.

При работе над созданием Cross Browser Favicons (включая сенсорные иконки) необходимо учитывать несколько моментов.

Первый (конечно) это Internet Explorer. IE не поддерживает значки PNG до версии 11. Итак, наша первая строка - это условный комментарий для значков в IE 9 и ниже:

<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->

Чтобы покрыть использование значка, создайте его в 32x32 пикселей. Обратите внимание, что rel="shortcut icon"для IE, чтобы узнать значок, ему нужно слово, shortcutкоторое не является стандартным. Также мы оборачиваем .icoзначок в условный комментарий IE, потому что Chrome и Safari будут использовать .icoфайл, если он присутствует, несмотря на другие доступные параметры, а не на то, что нам хотелось бы.

Вышеупомянутое охватывает IE до IE 9. IE 11 принимает значки PNG, однако IE 10 не принимает. Также IE 10 не читает условные комментарии, поэтому IE 10 не будет отображать значок. В IE 11 и Edge я не вижу широкого применения IE 10, поэтому игнорирую этот браузер.

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

<link rel="icon" href="path/to/favicon.png">

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

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

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

Использование rel="apple-touch-icon-precomposed"не будет применять отражающий блеск при закладке на iOS. Для iOS примените блеск rel="apple-touch-icon". Этот значок должен иметь размер 180x180 пикселей, так как это текущий размер, рекомендованный Apple для новейших iPhone и iPad. Я прочитал Blackberry также будет использовать rel="apple-touch-icon-precomposed".

Как примечание: Chrome для Android гласит:

Apple-Touch- * устарела и будет поддерживаться только в течение короткого времени. (Написано как бета-версия для M31 Chrome).

Пользовательские плитки для IE 11+ на Windows 8.1+

IE 11+ в Windows 8.1+ предлагает способ создания закрепленных плиток для вашего сайта.

Microsoft рекомендует создать несколько плиток следующего размера:

Малый: 128 х 128

Средний: 270 х 270

Широкий: 558 х 270

Большой: 558 х 558

Это должны быть прозрачные изображения, так как далее мы определим цвет фона.

После того, как эти изображения созданы, вы должны создать XML-файл с именем browserconfig.xmlследующего кода:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="images/smalltile.png"/>
      <square150x150logo src="images/mediumtile.png"/>
      <wide310x150logo src="images/widetile.png"/>
      <square310x310logo src="images/largetile.png"/>
      <TileColor>#009900</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Сохраните этот XML-файл в корне вашего сайта. Когда сайт закреплен, IE будет искать этот файл. Если вы хотите назвать xml-файл по-другому или добавить его в другое место, добавьте этот метатег в head:

<meta name="msapplication-config" content="path-to-browserconfig/custom-name.xml" />

Для получения дополнительной информации о пользовательских плитках IE 11+ и использовании файла XML посетите веб-сайт Microsoft .

Собираем все вместе:

Чтобы собрать все вместе, приведенный выше код будет выглядеть так:

<!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->

<!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. --> 
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. -->
<link rel="icon" href="path/to/favicon.png">

Windows Phone Live Tiles

Если пользователь использует Windows Phone, он может прикрепить веб-сайт к начальному экрану своего телефона. К сожалению, когда они делают это, он отображает скриншот вашего телефона, а не значок (даже не указанный выше код MS). Чтобы создать «Живую плитку» для пользователей Windows Phone для вашего сайта, необходимо использовать следующий код:

Вот подробные инструкции от Microsoft, но вот краткий обзор:

Шаг 1

Создайте квадратное изображение для своего сайта, для поддержки экранов высокого разрешения создайте его размером 768x768 пикселей.

Шаг 2

Добавьте скрытое наложение этого изображения. Вот пример кода от Microsoft:

<div id="TileOverlay" onclick="ToggleTileOverlay()" style='background-color: Highlight; height: 100%; width: 100%; top: 0px; left: 0px; position: fixed; color: black; visibility: hidden'>
  <img src="customtile.png" width="320" height="320" />
  <div style='margin-top: 40px'>
     Add text/graphic asking user to pin to start using the menu...
  </div>
</div>

Шаг 3

Затем вы можете добавить следующую строку, чтобы добавить пин-код для начала ссылки:

<a href="javascript:ToggleTileOverlay()">Pin this site to your start screen</a>

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

Шаг 4

Затем вы добавляете JS для переключения видимости наложения

<script>
function ToggleTileOverlay() {
 var newVisibility =     (document.getElementById('TileOverlay').style.visibility == 'visible') ? 'hidden' : 'visible';
 document.getElementById('TileOverlay').style.visibility =    newVisibility;
}
</script>

Примечание по размерам

Я использую один размер, так как каждый браузер будет уменьшать изображение по мере необходимости. Я мог бы добавить больше HTML, чтобы указать несколько размеров, если это необходимо для тех, у кого меньшая пропускная способность, но я уже сильно сжимаю файлы PNG, используя TinyPNG, и считаю это ненужным для моих целей. Также, согласно ответу philippe_b , в Chrome и Firefox есть ошибки, которые заставляют браузер загружать иконки всех размеров. Из-за этого использование одного большого значка может быть лучше, чем нескольких меньших.

Дальнейшее чтение

Для тех, кто хотел бы больше подробностей, смотрите ссылки ниже:

• Статья Википедии о фавиконах
• Справочник по иконам
• Понять Фавикон Джонатан Т. Нил
• rel = "ярлык", который Матиас Биненс считает вредным
• Все, что вы всегда хотели знать о сенсорных иконках от Mathias Bynens

Нет, не все браузеры поддерживают этот sizesатрибут:

• Safari: Да, он выбирает картинку, которая подходит лучше всего .
• Опера: Да, он выбирает картинку, которая подходит лучше всего .
• IE11: не уверен. Очевидно, он берет более широкую картину , которую находит , что немного грубо, но все в порядке.
• Chrome: нет, см. Ошибки 112941 и 324820 . Фактически, Chrome загружает все объявленные значки, а не только лучшие / первые / последние.
• Firefox: нет, см. Ошибку 751712 . Как и Chrome, Firefox имеет тенденцию загружать все объявленные иконки.

Обратите внимание, что некоторые платформы определяют конкретные размеры:

• Android Chrome ожидает значок 192x192 , но предпочитает значки, объявленные в manifest.jsonслучае его наличия . Кроме того, Chrome использует значок Apple Touch для закладок .
• Побережье Оперы ожидает значок 228x228 .
• Google TV ожидает значок 96x96 .