Чи підтримуються піктограми Apple touch більше 60x60, і якщо так, то які розміри слід використовувати для iPad та iPhone?
Чи підтримуються піктограми Apple touch більше 60x60, і якщо так, то які розміри слід використовувати для iPad та iPhone?
Відповіді:
Оновлений список грудень 2019, iOS13 Один значок для iOS 180x180 px та один для android 192x192 px (оголошено на сайті.webmanifest).
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
#### site.webmanifest
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
}
],
"display": "standalone"
}
Застарілий список жовтня 2017 року, iOS11
Список для iPhone та iPad із сітківкою та без неї
<!-- iPhone(first generation or 2G), iPhone 3G, iPhone 3GS -->
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png">
<!-- iPad and iPad mini @1x -->
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<!-- iPhone 4, iPhone 4s, iPhone 5, iPhone 5c, iPhone 5s, iPhone 6, iPhone 6s, iPhone 7, iPhone 7s, iPhone8 -->
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<!-- iPad and iPad mini @2x -->
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<!-- iPad Pro -->
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<!-- iPhone X, iPhone 8 Plus, iPhone 7 Plus, iPhone 6s Plus, iPhone 6 Plus -->
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">
<!-- Android Devices High Resolution -->
<link rel="icon" sizes="192x192" href="icon-hd.png">
<!-- Android Devices Normal Resolution -->
<link rel="icon" sizes="128x128" href="icon.png">
Оновлення жовтня 2017 року iOS 11: iOS 11 перевірено, iPhone X та iPhone 8 представлені
Оновлення листопада 2016 р. IOS 10: Нова версія iOS iPhone 7 та iPhone 7plus представлена, вони мають таку ж роздільну здатність дисплея, dpi тощо тощо, як iPhone 6s та iPhone 7plus, до цих пір жодних змін щодо оновлення 2015 року не знайдено
Оновіть Android 2016 року в середині 2016 року: додайте пристрої Android до списку, оскільки посилання на дотик до яблук позначені як застарілі від Google і не підтримуватимуться в будь-який час для їх пристроїв
<!-- Android Devices High Resolution -->
<link rel="icon" sizes="192x192" href="icon-hd.png">
<!-- Android Devices High Resolution -->
<link rel="icon" sizes="128x128" href="icon.png">
Оновлення 2015 року для iOS 9: для iOS 9 та iPad pro
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
Нові iPhone-телефони (6s та 6s Plus) використовують ті ж розміри, що і iPhone (6 і 6 Plus), новий iPad pro використовує зображення розміром 167x167 px, інші роздільні здатності залишаються такими ж.
Оновлення 2014 року для iOS 8:
Для iOS 8 та iPhone 6 plus
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">
Iphone 6 використовує те саме зображення 120 x 120 px, як iphone 4 і 5, решта - те саме, що і для iOS 7
Оновлення 2013 iOS7:
Для iOS 7 рекомендовані резолюції змінилися:
Інша резолюція залишається такою ж
Джерело: https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/
<link rel="apple-touch-icon" href="icon.png"> біт
Використовуйте ці розміри 57x57, 72x72, 114x114, 144x144, а потім зробіть це в голові документа:
<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />
Це буде добре виглядати на всіх пристроях яблук. ;)
sizesатрибут, тому використовують те значення, яке є останнім. Тому <link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />має бути останнім. Крім того, як каже pezillionaire, тепер ви можете додати нову іконку розміром 144x144 для iPad Retina.
apple-touch-icon-precomposed.png, а інші iDevices дозволяти змінювати розмір, як потрібно.
У iPad (3-е покоління) зараз є чотири значки розміром 57x57, 72x72, 114x114, 144x144.
Оскільки піктограми сітківки точно вдвічі перевищують стандартні піктограми, нам дійсно потрібно зробити лише 2 значки : 114 x 114 та 144 x 144. Встановивши піктограму розміру сітківки на відповідну стандартну піктограму, iOS буде масштабувати їх відповідно.
<!-- Standard iPhone -->
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png" />
<!-- Retina iPhone -->
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" />
<!-- Standard iPad -->
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png" />
<!-- Retina iPad -->
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-144.png" />
apple-touch-icon-precomposed.png, а інші iDevices дозволяти змінювати розмір, як потрібно.
Піктограма на сайті Apple - 152x152 пікселів.
http://www.apple.com/apple-touch-icon.png
Сподіваюся, що відповість на ваше запитання.
TL; DR: використовуйте один значок PNG у форматі 180 x 180 px при 150 ppi, а потім посилайтеся на нього так:
<link rel="apple-touch-icon" href="path/to/apple-touch-icon.png">
Станом на 2020-04 рр. Канонічна відповідь від Apple відображена в їхній документації на iOS .
Офіційно специфікація говорить:
Насправді ці відмінності в розмірах невеликі, тому економія продуктивності дійсно матиме значення лише на сайтах із дуже високим трафіком.
Для сайтів із меншим трафіком я зазвичай використовую одну піктограму PNG зі швидкістю 180 x 180 px при 150 ppi і отримую дуже хороші результати на всіх пристроях, навіть у розмірах плюс.
Я розробка і проектування додатків IOS деякого час , і це кращий IOS дизайну шпаргалка там!
весело :)!

Оновлення: для iOS 8+ та нових пристроїв (iPhone 6, 6 Plus, iPad Air) дивіться це оновлене посилання .
Мета оновлення: Iphone 6s / 6s Plus мають ті ж роздільні можливості, що і iPhone 6/6 Plus відповідно
Це зображення з нової версії статті:

Відповідна документація на сайті Apple із зазначенням значка веб-сторінки для веб-кліпу .
Не потрібно нічого класти в голову свого документа. Якщо піктограми не вказані за допомогою елемента посилання, в кореневому каталозі веб-сайту шукається піктограма з префіксом яблучного дотику або яблучного сенсорного значка .
Наприклад, якщо відповідний розмір значка для пристрою становить 57 х 57, система шукає назви файлів у такому порядку:
Так. Якщо розмір не відповідає, система змінить його масштаб . Але краще зробити 2 версії ікон.
Ви можете розмежувати iPad та iPhone за користувацьким агентом на вашому сервері. Якщо ви не хочете писати скрипт на сервері, ви також можете змінити піктограму за допомогою JavaScript
<link ref="apple-touch-icon" href="iPhone_version.png" />
...
if (... iPad test ...) {
$('link[rel="apple-touch-icon"]').href = 'iPad_version.png'; // assuming jQuery
}
Це працює, оскільки піктограма запитується лише тоді, коли ви додаєте веб-кліп.
(Ще немає публічного способу відрізнити iPhone ≥4 від iPhone ≤3GS у Javascript.)
Так, підтримуються більше 60x60. Для простоти створіть піктограми таких 4 розмірів:
1) 60x60 <= default
2) 76x76
3) 120x120
4) 152x152
Тепер бажано додавати їх як посилання у своєму HTML як:
<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">
Ви можете не оголошувати 4 вищенаведені посилання, а просто оголосити одне посилання, і в такому випадку, наприклад, надати найвищий розмір 152x152або навіть розмір, більший за нього 196x196. Він завжди буде скорочувати розмір для повторного призначення. Переконайтесь, що ви згадуєте про це size.
Ви також можете не оголошувати навіть жодне посилання. Apple зазначає, що в цьому сценарії вона спочатку apple-touch-icon-<size>.pngшукатиме корінь сервера, щоб розмір був одразу вище, ніж потрібний розмір (формат іменування:) , а якщо його не знайдено, то наступного шукатиме default file: apple-touch-icon.png. Бажано, щоб ви визначили посилання (и), які дозволять мінімізувати запит браузера на вашому сервері.
Необхідні значки:
- use PNG, avoid interlaced
- use 24-bit PNG
- not necessary to use web-safe colors
У версіях, старших за iOS 7, якщо ви не хочете, щоб вони додавали ефекти до ваших значків, просто додайте суфікс -precomposed.pngдо імені файлу. (iOS 7 не додає ефектів навіть без нього).
Я думаю, що це питання стосується веб-іконок. Я намагався дати піктограму в 512x512, і на тренажері iPhone 4 він виглядає чудово (у попередньому перегляді), проте при додаванні на головний екран він погано пікселізований.
З іншого боку, якщо ви використовуєте більшу іконку на iPad (все-таки з моїм тестом 512x512), схоже, вийде кращої якості на iPad. Сподіваємось, що рендерінг iPhone 4 - це помилка.
Я відкрив помилку про це на радарі.
Редагувати:
Зараз я використовую піктограму розміром 114x114, сподіваючись, що вона буде добре виглядати на iPhone 4 після її виходу. Якщо iPhone 4 все ще має помилку, коли він з’явиться, я збираюся оптимізувати піктограму для iPad (чіткою та без зміни розміру в 72x72), а потім дозволити її зменшити розмір для старих iPhone.
Для iPhone та iPod touch створіть піктограми, які вимірюють:
57 X 57 pixels
114 X 114 pixels (high resolution @2X)
Для iPad створіть піктограму, яка вимірює:
72 x 72 pixels
144 X 144 pixels (high resolution @2X)