До сих пор я включал строку для значка Apple Touch в моей голове:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
Тем не менее, в Q & A "Каковы правильные размеры пикселей для значка с яблочным прикосновением?" в принятом ответе указано, что три изображения теперь необходимы в соответствии с рекомендациями Apple.
Итак, как можно вставлять их в головную часть кода?
Здесь вы идете, надеюсь, что это поможет.
Если вы хотите, чтобы Apple сделала для вас эстетический бит (добавьте блеск), вы поместите их в теги <head>:
<link rel="apple-touch-icon" href="apple-touch-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-iphone4.png" />
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-ipad-retina.png" />
Если вы хотите предустановить изображение, чтобы Apple отображало его без блеска, вы должны сделать следующее:
<link rel="apple-touch-icon-precomposed" href="apple-touch-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-ipad.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-iphone4.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-ipad-retina.png" />
При условии, что вы включите более одного устройства, iOS будет искать правильный размер и автоматически использовать это изображение. Как видно из названий изображений в примере, для iPad с дисплеем сетчатки требуется значок размером 144x144 пикселей, для iPhone 4/4S/5 требуется значок размером 114x114 пикселей, оригинальный iPad (и iPad 2, как разрешение экрана ничем не отличается) требуется значок 72x72px, а оригинальному iPhone не нужна спецификация размера, но для вашей справки 57x57px.
Спецификации Apple определяют новые размеры для iOS7:
Кроме того, предварительно сохраненные значки устарели.
Как следствие, для поддержки новых устройств (под управлением iOS7) и более старых (iOS6 и ранее) общий код:
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
Кроме того, вы должны создать изображение 180x180 с именем apple-touch-icon.png.
Обратите внимание, что iOS ищет URL как /apple-touch-icon-76x76.png, если он не находит интересные вещи в HTML-коде (немного похоже на то, что IE делает с /favicon.ico). Поэтому важно, чтобы имена файлов были выше. Также важно учитывать, что Android/Chrome также использует эти изображения.
Возможно, вам захочется узнать, что этот генератор favicon может создавать все эти снимки сразу. Полное раскрытие: я автор этого сайта.
Поскольку некоторые из этих ответов уже устарели, я рекомендую использовать http://realfavicongenerator.net/ для создания всех изображений и разметки - я каждый день жертвую пару евро Я использую его в надежде, что он позволит им быть в курсе того, что в настоящее время действует на iOS, Android и Windows, поэтому мне не нужно.
Указание значка веб-страницы для веб-клипа
Вы можете захотеть, чтобы пользователи могли добавлять ссылку на веб-приложение или веб-страницу на главный экран. Эти ссылки, представленные значком, называются веб-клипами. Выполните следующие простые шаги, чтобы указать значок для представления своего веб-приложения или веб-страницы на iOS.
Чтобы указать значок для всего веб-сайта (каждая страница на веб-сайте), поместите файл значка в формате PNG в папку корневого документа с именем apple-touch-icon.png
Чтобы указать значок для одной веб-страницы или заменить значок веб-сайта значком на веб-странице, добавьте элемент ссылки на веб-страницу, например:
<link rel="apple-touch-icon" href="/custom_icon.png">
В приведенном выше примере замените custom_icon.png своим именем файла значка. Чтобы указать несколько значков для разных разрешений устройств - например, поддерживайте устройства iPhone и iPad - добавьте атрибут размеров каждому элементу ссылки следующим образом:
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
Используется значок, наиболее подходящий для устройства. Если атрибут размера не задан, размер элементов по умолчанию равен 60 x 60. Если значок не соответствует рекомендуемому размеру для устройства, используется наименьший значок, размер которого превышает рекомендуемый размер. Если иконки больше рекомендуемого размера, используется самый большой значок.
Если ни один значок не указан с помощью элемента ссылки, корневой каталог веб-сайта ищет значки с префиксом apple-touch-icon.... Например, если соответствующий размер значка для устройства равен 60 x 60, система ищет имена файлов в следующем порядке:
apple-touch-icon-76x76.png
apple-touch-icon.png
См. значок и размеры изображений для метрик страницы веб-страницы.
Примечание: Safari на iOS 7 не добавляет эффекты в значки. Старые версии Safari не будут добавлять эффекты для файлов значков, названных в суффиксе -precomposed.png. См. "Первые шаги: идентификация вашего приложения в iTunes Connect" для получения более подробной информации.
Источник: Характеристики значков Apple touch
Я никогда не читал никаких спецификаций на яблоки, я должен признать, но, согласно журналам на моем сайте, эти изображения требуются в корне:
apple-touch-icon-72x72.png
apple-touch-icon-76x76.png
apple-touch-icon-120x120.png
apple-touch-icon-152x152.png
apple-touch-icon-72x72-precomposed.png
apple-touch-icon-76x76-precomposed.png
apple-touch-icon-120x120-precomposed.png
apple-touch-icon-152x152-precomposed.png
От моего запроса pull до https://github.com/h5bp/mobile-boilerplate (с иконками iPhone 6):
<!-- iPad and iPad mini (with @2× display) iOS ≥ 8 -->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="img/touch/apple-touch-icon-180x180-precomposed.png">
<!-- iPad 3+ (with @2× display) iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="img/touch/apple-touch-icon-152x152-precomposed.png">
<!-- iPad (with @2× display) iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png">
<!-- iPhone (with @2× and @3 display) iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="img/touch/apple-touch-icon-120x120-precomposed.png">
<!-- iPhone (with @2× display) iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png">
<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="img/touch/apple-touch-icon-76x76-precomposed.png">
<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png">
<!-- Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png">
<!-- Fallback for everything else -->
<link rel="shortcut icon" href="img/touch/apple-touch-icon.png">
<!--
Chrome 31+ has home screen icon 192×192 (the recommended size for multiple resolutions).
If it’s not defined on that size it will take 128×128.
-->
<link rel="icon" sizes="192x192" href="img/touch/touch-icon-192x192.png">
<link rel="icon" sizes="128x128" href="img/touch/touch-icon-128x128.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="img/touch/apple-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#222222">