it-swarm.com.ru

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

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

121
Harry

Обновлен список октябрь 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

Обновление середины 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 (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

Обновление iOS7 2013:

Для iOS 7 рекомендуемые разрешения изменены:

  • для iPhone Retina от 114 х 114 пикселей до 120 х 120 пикселей
  • для iPad Retina от 144 х 144 пикселей до 152 х 152 пикселей

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

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

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

127
felipep

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

117
Darren

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

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

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

34
abe

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

повеселись :)!

this image is from that article :)

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

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

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

iOS 8 and mid 2014 devices info

16
MrHaze

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 px @ 150 ppi и получаю очень хорошие результаты на всех устройствах, даже на плюс размер из них.

15
staypuftman

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

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

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

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

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

5
kennytm

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

2
Ethan

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

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

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

Правка:

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

1
Chris Drackett

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