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

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

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

Взглянув на цитированную статью (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, подтверждающего это.)

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

Ответ 1

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

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

Первым (конечно) является 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+ предлагает способ создания закрепленных фрагментов для вашего сайта.

Корпорация Майкрософт рекомендует создать несколько фрагментов следующего размера:

Маленький: 128 x 128

Средняя: 270 x 270

Широкий: 558 x 270

Большой: 558 x 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, упомянутый выше). Чтобы сделать "Live Tile" для пользователей Windows Phone для вашего сайта, необходимо использовать следующий код:

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

Шаг 1

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

Шаг 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>

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

Шаг 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 есть ошибки, которые заставляют браузер загружать все размеры значков. Из-за этого использование одного большого значка может быть лучше, чем несколько меньших.

Дополнительная литература

Для тех, кто хотел бы получить более подробную информацию, см. ссылки ниже:

Ответ 2

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

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