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

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

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

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

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

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