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

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

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

первый (конечно) является Internet Explorer. IE не поддерживает png favicons до версии 11. Таким образом, наша первая строка является условным комментарием для favicons в IE 9 и ниже:

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

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

выше крышки, т. е. на т. е. 9. IE 11 принимает png favicons, однако 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 хрома).

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

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

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

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

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

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

Шаг 1

создайте квадратное изображение для вашего вебсайта, для того чтобы поддержать экраны hi-res создайте его на пикселях 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

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

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

Более Дальнеишее Чтение

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

• статья в Википедии о Favicons
• Значок Руководство
• понять фавикон Джонатан Нил т.
• rel= "ярлык" считается вредным Матиас Байненс
• все, что вы всегда хотели знать о касании иконки Матиас Байненс