До сих пор я вставлял в голове строку для значка Apple Touch следующим образом:
<link rel="apple-touch-icon" href="https://stackoverflow.com/apple-touch-icon.png">
Однако в разделе вопросов и ответов «Каковы правильные размеры в пикселях для сенсорного значка яблока?» в принятом ответе указано, что в соответствии с рекомендациями Apple теперь необходимы три изображения.
Так как же вставить их в заголовок кода?
Минималистское решение - рекомендуется
Распространенной практикой является создание одного значка 180x180, что является самым высоким ожидаемым разрешением, и разрешение устройствам iOS масштабировать его по мере необходимости. Он заявлен с помощью:
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
Исчерпывающее решение - не рекомендуется
В спецификациях 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 также использует эти изображения .
Возможно, вы захотите узнать, что этот генератор значков может создавать все эти изображения одновременно. Полное раскрытие: я являюсь автором этого сайта.
<link>теге загружаются, если их нет в кеше клиента? Независимо от того, где запрашивается страница (телефон, планшет, компьютер, windows, android ...)? Меня немного беспокоят последствия для производительности ...<link rel="apple-touch-icon" href="https://stackoverflow.com/apple-touch-icon.png" type="image/png" />. И даже если вы создаете изображения разного размера, насколько я могу судить, вы можете просто удалить все ссылки на значок яблока, и iOS сама будет искать файлы, начиная с предпочтительного размера (например, apple-touch-icon-180x180. png) и использовать apple-touch-icon.png, если другие файлы не найдены.apple-touch-icon).Вот и все, надеюсь, это поможет.
Если вы хотите, чтобы 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 с дисплеем Retina требуется значок размером 144x144 пикселей, iPhone 4 / 4S / 5 нуждается в значке размером 114x114 пикселей, оригинальному iPad (и iPad 2, как разрешение экрана не отличается) требуется значок 72x72 пикселей, а исходный iPhone не требует указания размера, но для справки это 57x57 пикселей.
источник
Поскольку некоторые из этих ответов уже устарели, я рекомендую использовать http://realfavicongenerator.net/ для создания всех изображений и разметки - я жертвую пару евро каждый раз, когда использую его, в надежде, что это позволит им сохранить в курсе того, что в настоящее время действует для iOS, Android и Windows, поэтому мне не нужно.
источник
По состоянию на 2018 год веб-сайт разработчиков Apple рекомендует для устройств iOS следующее:
<link rel="apple-touch-icon" href="touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png"> <link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png"> <link rel="apple-touch-startup-image" href="/launch.png"> <meta name="apple-mobile-web-app-title" content="AppTitle">Название приложения заменит название вашего сайта. Обычно вы этого хотите. Изображение при запуске - это то, что будет отображаться при запуске приложения.
источник
Указание значка веб-страницы для веб-клипа
Вы можете захотеть, чтобы пользователи могли добавлять ваше веб-приложение или ссылку на веб-страницу на главный экран. Эти ссылки, обозначенные значком, называются веб-подборками. Выполните следующие простые шаги, чтобы указать значок для представления вашего веб-приложения или веб-страницы на 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">Используется значок, наиболее подходящий для устройства. Если атрибут sizes не установлен, размер элемента по умолчанию равен 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, но, согласно журналам на моем сайте, эти изображения требуются в корневом каталоге:
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источник
Из моего запроса на перенос на 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">источник
Вы можете использовать omg-img для генерации всех размеров и цветов для популярных иконок. Например:
<link rel="apple-touch-icon" sizes="152x152" href="https://img.icons8.com/color/152x152/anonymous-mask.png">Этот тег возвращает следующее изображение для устройств iOS:
источник