Дотепер я включав у голову рядок для піктограми 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 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 з дисплеєм сітківки потребує значка 144x144px, iPhone 4 / 4S / 5 потребує значка 114x114px, оригінальний iPad (а iPad 2, як роздільна здатність екрану нічим не відрізняється) потрібна піктограма 72x72px, а оригінальний iPhone не потребує специфікації розміру, але для довідки це 57x57px.
Оскільки деякі з цих відповідей вже застаріли, я рекомендую використовувати 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">
Використовується піктограма, яка є найбільш відповідним розміром для пристрою. Якщо атрибут розміру не встановлений, розмір елемента за замовчуванням становить 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:
<link>тегу, якщо вони відсутні в кеш-пам'яті клієнта? Незалежно від того, де запитується сторінка (телефон, планшет, ПК, Windows, Android ...)? Я трохи стурбований наслідками для продуктивності ...