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

Ответ 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">

Обновление Oct 2017 iOS 11: iOS 11 проверена, iPhone X и iPhone 8 представлены

Обновление Nov 2016 iOS 10: Новая версия iOS для 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">

Новые iPhones (6s и 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 пикселей
• для iPad Retina от 144 x 144 px до 152 x 152 px

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

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

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

Ответ 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" />

Это будет хорошо выглядеть на всех яблочных устройствах.;)

Ответ 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" />

Ответ 4

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

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

Ответ 5

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

получайте удовольствие:)!

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

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

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

Ответ 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 167 пикселей × 167 пикселей (83,5 пикс., 83,5 пикс., 2x)
• iPad, iPad mini 152px × 152px (76pt × 76pt @2x)

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

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

Ответ 7

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

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

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

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

Ответ 8

Да. Если размер не совпадает, система изменит его. Но лучше сделать 2 варианта иконок.

• iPad - 72х72.
• 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.)

Ответ 9

Да, поддерживается более 60x60. Для простоты создайте значки этих четырех размеров:

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 не добавляет эффектов даже без него).

Ответ 10

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

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

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

EDIT:

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

Ответ 11

Для 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)