Якого розміру має бути apple-touch-icon.png для iPad та iPhone?


134

Чи підтримуються піктограми Apple touch більше 60x60, і якщо так, то які розміри слід використовувати для iPad та iPhone?




Щоб отримати найкращу відповідь, подивіться на веб-сайті Apple
Ruub

1
Я знайшов цей інструмент для створення піктограм з усіма підтримуваними розмірами та розміткою, яку потрібно включити на вашу сторінку. iconifier.net
agarcian

Відповіді:


145

Оновлений список грудень 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 рекомендовані резолюції змінилися:

  • для iPhone Retina від 114 x 114 px до 120 x 120 px
  • для iPad Retina від 144 x 144 px до 152 x 152 px

Інша резолюція залишається такою ж

  • За замовчуванням 57 х 57 пікс
  • 76 x 76 пікс для iPad без сітківки

Джерело: https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/


30
Мені б хотілося, щоб вони просто підтримували SVG і закінчилися з цим лаєм. Дякую за відповідь, проте!
Стівен Вачон

2
люблю оновлення ... робить цю відповідь надзвичайно актуальною!
Кріс Алліньсон

1
Варто зазначити, що популярне та перевірене на <link rel="apple-touch-icon" href="icon.png"> біт
HTMLpo Boilerplate

Також сучасний підхід до підтримки пристроїв Android полягає у використанні файлу маніфесту та вкажіть ваші піктограми: developers.google.com/web/fundamentals/app-install-banners - такий підхід також використовується на котлі HTML5 repo: github.com/h5bp/html5-boilerplate/blob/master/dist/…
jackocnr

Випробував це. На iPhone Xs піктограми здаються ніби розмитими поруч із піктограмою Github. : /
kaiserkiwi

117

Використовуйте ці розміри 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" />

   

Це буде добре виглядати на всіх пристроях яблук. ;)


8
Супровідна документація від apple: developer.apple.com/library/safari/#documentation/…
Jim Geurts

6
Атрибут розмірів не є дійсним HTML!

8
Старі пристрої iOS не розуміють sizesатрибут, тому використовують те значення, яке є останнім. Тому <link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />має бути останнім. Крім того, як каже pezillionaire, тепер ви можете додати нову іконку розміром 144x144 для iPad Retina.
appmattus

5
Станом на ios7 рекомендовані розміри змінилися: 114 × 114 -> 120 × 120, 144x144 -> 152x152 (сітківка)
Cody Django

4
@Cody і підхід HTML5Boilerplate тепер використовується лише використовувати піктограму 152x152 і називати її apple-touch-icon-precomposed.png, а інші iDevices дозволяти змінювати розмір, як потрібно.
Blazemonger

94

У 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" />

Мені найбільше подобається цей метод.
Калеб Ярес

Цей метод має до нього прекрасну простоту.
PaulSkinner

1
Тому ми робимо лише 2 зображення і дозволяємо пристрою зменшити масштаб в 2 рази. Симпатичний.
суперлюмінація

9
Станом на ios7 рекомендовані розміри змінилися: 114 × 114 -> 120 × 120, 144x144 -> 152x152 (сітківка)
Cody Django

4
@Cody і підхід HTML5Boilerplate тепер використовується лише використовувати піктограму 152x152 і називати її apple-touch-icon-precomposed.png, а інші iDevices дозволяти змінювати розмір, як потрібно.
Blazemonger

34

Піктограма на сайті Apple - 152x152 пікселів.
http://www.apple.com/apple-touch-icon.png

Сподіваюся, що відповість на ваше запитання.


1
Це. Або 144x144 (очікувана Resad Retina resina). Усі вони добре виглядають у порівнянні з можливістю зменшити розмір iPhone / iPad, при цьому плануючи трохи попереду.
DOOManiac

6
Станом на жовтень 2013 року, тепер це 152x152 і, схоже, не змінюється для різних пристроїв (не між моїм ноутбуком та iphone4)
Wick

17

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 .

Офіційно специфікація говорить:

  • iPhone 180px × 180px (60pt × 60pt @ 3x)
  • iPhone 120px × 120px (60pt × 60pt @ 2x)
  • iPad Pro 167px × 167px (83.5pt × 83.5pt @ 2x)
  • iPad, iPad mini 152px × 152px (76pt × 76pt @ 2x)

Насправді ці відмінності в розмірах невеликі, тому економія продуктивності дійсно матиме значення лише на сайтах із дуже високим трафіком.

Для сайтів із меншим трафіком я зазвичай використовую одну піктограму PNG зі швидкістю 180 x 180 px при 150 ppi і отримую дуже хороші результати на всіх пристроях, навіть у розмірах плюс.


16

Я розробка і проектування додатків IOS деякого час , і це кращий IOS дизайну шпаргалка там!

весело :)!

це зображення з тієї статті :)

Оновлення: для iOS 8+ та нових пристроїв (iPhone 6, 6 Plus, iPad Air) дивіться це оновлене посилання .

Мета оновлення: Iphone 6s / 6s Plus мають ті ж роздільні можливості, що і iPhone 6/6 Plus відповідно

Це зображення з нової версії статті:

Інформація про пристрої iOS 8 та середина 2014 року


6

Відповідна документація на сайті Apple із зазначенням значка веб-сторінки для веб-кліпу .

Не потрібно нічого класти в голову свого документа. Якщо піктограми не вказані за допомогою елемента посилання, в кореневому каталозі веб-сайту шукається піктограма з префіксом яблучного дотику або яблучного сенсорного значка .

Наприклад, якщо відповідний розмір значка для пристрою становить 57 х 57, система шукає назви файлів у такому порядку:

  • apple-touch-icon-57x57-precomposed.png
  • apple-touch-icon-57x57.png
  • apple-touch-icon-precomposed.png
  • apple-touch-icon.png

Так, але це питання стосується нових (більших) піктограм для iphone4 та ipad.
cherouvim

Хоча нічого не потрібно вказувати у заголовку, все-таки є хорошою практикою. Якщо ви, наприклад, пропустили версію 144x144 для iPad сітківки, і немає піктограми без розміру пікселя, Mobile Safari повернеться до відображення лише попереднього попереднього перегляду сайту, хоча він може використовувати неоптимальну, але все ж кращу, меншу версію.
Рафаель Бугаєвський

Це дуже погана ідея не вказувати у заголовку, оскільки інші платформи також використовуватимуть їх (Android, ChromeOS, Blackberry, ...)
Remi Grumeau

5

Так. Якщо розмір не відповідає, система змінить його масштаб . Але краще зробити 2 версії ікон.

  • iPad - 72x72.
  • iPhone (≥4) - 114x114.
  • iPhone ≤3GS - 57x57 - Якщо можливо.

Ви можете розмежувати 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.)


1
Роздільна здатність iPhone 4, мабуть, зменшується в порівнянні з iPhone 3 в два рази, тому 114x114, мабуть, буде хорошим вибором для розміру значка для цього.
JAB

@JAB: Піктограму додано межі, тому фактичний розмір піктограми на iPhone ≤3GS становить 59x60. Якщо це так, 114x114 може бути трохи відключений.
kennytm

Чи не обмежуються межі на iPhone 4+ на однакову кількість, залежно від роздільної здатності (щоб вони виглядали однаковою шириною)?
JAB

@JAB: Так має бути. Я не перевіряв.
kennytm

Дякую за всі ваші ідеї / поради. Якщо я роблю 3 версії, як орієнтуватися на кожен пристрій відповідного розміру? Якщо я щось не пропускаю і PNG - це формат контейнера, в який я можу розміщувати різні розміри?
Гаррі

2

Так, підтримуються більше 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 не додає ефектів навіть без нього).


1

Я думаю, що це питання стосується веб-іконок. Я намагався дати піктограму в 512x512, і на тренажері iPhone 4 він виглядає чудово (у попередньому перегляді), проте при додаванні на головний екран він погано пікселізований.

З іншого боку, якщо ви використовуєте більшу іконку на iPad (все-таки з моїм тестом 512x512), схоже, вийде кращої якості на iPad. Сподіваємось, що рендерінг iPhone 4 - це помилка.

Я відкрив помилку про це на радарі.

Редагувати:

Зараз я використовую піктограму розміром 114x114, сподіваючись, що вона буде добре виглядати на iPhone 4 після її виходу. Якщо iPhone 4 все ще має помилку, коли він з’явиться, я збираюся оптимізувати піктограму для iPad (чіткою та без зміни розміру в 72x72), а потім дозволити її зменшити розмір для старих iPhone.


0

Для 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)
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.