До сих пор я вставлял в голове строку для значка Apple Touch следующим образом:
<link rel="apple-touch-icon" href="/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 ...)? Меня немного беспокоят последствия для производительности ...
- person RayOnAir; 19.06.2014
<link rel="apple-touch-icon" href="/apple-touch-icon.png" type="image/png" />. И даже если вы создаете изображения разного размера, насколько я могу судить, вы можете просто удалить все ссылки на значок касания яблока, и iOS сама будет искать файлы, начиная с предпочтительного размера (например, apple-touch-icon-180x180. png) и используйте apple-touch-icon.png, если другие файлы не найдены.
- person iquito; 18.04.2016
apple-touch-icon).
- person iquito; 20.04.2016
Вот и все, надеюсь, это поможет.
Если вы хотите, чтобы 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 - добавьте атрибут sizes к каждому элементу ссылки следующим образом:
<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:
