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

Question

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

Answer 1

Обновленный список Октябрь 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 7 для iPhone 7 и iPhone 7plus, они имеют то же разрешение экрана, dpi и т. д., что иiPhone 6s и iPhone 7plus, до сих пор не найдено никаких изменений в отношении обновления 2015

Обновление середины 2016 года Android: Добавление устройств Android в список, так как ссылки Apple Touch отмечены 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 (6 с и6s Plus) используют те же размеры, что и iPhone (6 и 6 Plus), новый iPad pro использует изображение размером 167x167 px, остальные разрешения остаются такими же.

Обновление 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 px до 120 x 120 px
• для iPad Retina от 144 x 144 px до 152 x 152 px

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

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

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

Answer 2

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

Answer 3

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

Answer 4

Значок на сайте Apple имеет размер 152х152 пикселей.
http://www.apple.com/apple-touch-icon.png

Надеюсь, что ответит на ваш вопрос.

Answer 5

Я уже некоторое время занимаюсь разработкой и дизайном приложений для iOS, и Этот - лучший чит-лист дизайна iOS!

веселиться :)!

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

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

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

Answer 6

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

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

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

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

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

• iPhone 180px × 180px (60pt × 60pt @ 3x)
• iPhone 120px × 120px (60pt × 60pt @ 2x)
• iPad Pro 167px × 167px (83,5 точек × 83,5 точек @ 2x)
• iPad, iPad mini 152px × 152px (76pt × 76pt @ 2x)

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

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

Answer 7

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

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

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

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

Answer 8

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

Это работает, потому что значок запрашивается только при добавлении веб-клипа.

(В Javascript пока нет публичного способа отличить iPhone ≥4 от iPhone ≤3GS.)

Answer 9

Да, поддерживается больше 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: * 1014.*.Желательно, чтобы вы указали ссылку (и), так как это сведет к минимуму количество запросов браузера к вашему серверу.

Необходимые значки:

- use PNG, avoid interlaced
- use 24-bit PNG
- not necessary to use web-safe colors

В версиях, более старых, чем iOS 7, если вы не хотите добавлять эффекты к значкам, просто добавьте суффикс -precomposed.png в файлназвание.(iOS 7 не добавляет эффектов даже без него).

Answer 10

Я думаю, что этот вопрос касается веб-иконок. Я попытался дать значок 512x512, и на симуляторе iPhone 4 он выглядит великолепно (в превью), однако при добавлении на домашний экран он плохо пикселируется.

С другой стороны, если вы используете больший значок на iPad (все еще с моим тестом 512x512), он выглядит лучше на iPad. Надеюсь, рендеринг iPhone 4 - это ошибка.

Я открыл ошибку об этом на радаре.

EDIT:

В настоящее время я использую значок 114x114 в надежде, что он будет хорошо выглядеть на iPhone 4 после его выпуска. Если у iPhone 4 все еще есть ошибка, когда он выйдет, я собираюсь оптимизировать значок для iPad (четкое и без изменения размера при 72x72), а затем уменьшу его для старых iPhone.