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