Какого размера должен быть apple-touch-icon.png для iPad и iPhone?

Поддерживаются ли сенсорные значки Apple размером более 60x60, и если да, то какие размеры следует использовать для iPad и iPhone?

Обновленный список Декабрь 2019, iOS13 Один значок для iOS 180x180 px и один для Android 192x192 px (объявлено в site.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 года: добавьте устройства Android в список, так как ссылки с сенсорным экраном Apple отмечены 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 пикселей, остальные разрешения остаются такими же.

Обновление 2014 iOS 8:

Для iOS 8 и iPhone 6 плюс

<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 пикселей до 120 x 120 пикселей
• для iPad Retina от 144 x 144 пикселей до 152 x 152 пикселей

Другое разрешение осталось прежним

• 57 x 57 пикселей по умолчанию
• 76 x 76 пикселей для iPad без сетчатки

Источник: https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/

Используйте эти размеры 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" />

Это будет хорошо смотреться на всех устройствах Apple. ;)

В 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 имеет размер 152x152 пикселей.
http://www.apple.com/apple-touch-icon.png

Надеюсь это ответит на твой вопрос.

TL; DR: используйте один значок PNG размером 180 x 180 пикселей @ 150 пикселей на дюйм, а затем создайте ссылку на него следующим образом:

<link rel="apple-touch-icon" href="path/to/apple-touch-icon.png">

Подробная информация о подходе

По состоянию на 2020-04 год канонический ответ Apple отражен в их документации по iOS .

Официально в спецификации сказано:

• iPhone 180 пикселей × 180 пикселей (60 пикселей × 60 пикселей @ 3x)
• iPhone 120 пикселей × 120 пикселей (60 пикселей × 60 пикселей @ 2x)
• iPad Pro 167 пикселей × 167 пикселей (83,5 пункта × 83,5 пункта @ 2x)
• iPad, iPad mini 152 пикселей × 152 пикселей (76 пикселей × 76 пикселей @ 2x)

На самом деле эти различия в размерах крошечные, поэтому экономия производительности будет иметь значение только на сайтах с очень высоким трафиком.

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

Некоторое время я занимался разработкой и дизайном приложений для iOS, и это лучшая шпаргалка для iOS!

радоваться, веселиться :)!

Обновление: для iOS 8+ и новых устройств (iPhone 6, 6 Plus, iPad Air) смотрите эту обновленную ссылку .

Мета-обновление: Iphone 6s / 6s Plus имеет такое же разрешение, что и iPhone 6/6 Plus соответственно.

Это изображение из новой версии статьи:

Соответствующая документация на сайте Apple, Указание иконки веб-страницы для Web Clip .

Нет необходимости помещать что-либо в заголовок вашего документа. Если с помощью элемента ссылки не указаны значки, в корневом каталоге веб-сайта ищутся значки с префиксом apple-touch-icon или apple-touch-icon-precomposed .

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

• яблоко-сенсорный значок-57x57-precomposed.png
• яблоко-сенсорный значок-57x57.png
• яблоко-сенсорный значок-precomposed.png
• яблоко-сенсорный icon.png

Да. Если размер не совпадает, система изменит его масштаб . Но лучше сделать 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.)

Да, больше 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)