Чи підтримуються піктограми 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)