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


134

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




Чтобы получить лучший ответ,
посетите

1
Я нашел этот инструмент для создания значков всех поддерживаемых размеров и разметки для включения на вашу страницу. iconifier.net
agarcian

Ответы:


145

Обновленный список Декабрь 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/


30
Я бы хотел, чтобы они просто поддержали SVG и покончили с этим дерьмом. Однако спасибо за ответ!
Стивен Вашон

2
люблю обновления ... делает этот ответ супер актуальным!
Крис Аллинсон,

1
Стоит отметить, что популярное и проверенное в бою репозиторий HTML5 Boilerplate рекомендует использовать только один <link rel="apple-touch-icon" href="icon.png">
универсальный

Также современный подход к поддержке устройств Android состоит в том, чтобы использовать файл манифеста и указать там свои иконки: developers.google.com/web/fundamentals/app-install-banners - этот подход также используется в HTML5 Boilerplate репо: 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" />

   

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


8
Сопроводительная документация от Apple: developer.apple.com/library/safari/#documentation/…
Джим Гёртс,

6
Однако атрибут sizes недействителен 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 раза. Милый.
superluminary

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 (ожидаемое разрешение Retina iPad). Все они хорошо выглядят в уменьшенном масштабе до размеров iPhone / iPad с меньшим разрешением, при этом немного забегая вперед.
DOOManiac

6
По состоянию на октябрь 2013 года, теперь он составляет 152х152 и, похоже, не меняется для разных устройств (во всяком случае, между моим ноутбуком и iphone4)
Wick

17

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


16

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

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

это изображение из той статьи :)

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

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

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

Информация об устройствах iOS 8 и середине 2014 года


6

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

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

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

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

Да, но этот вопрос касается новых (больших) значков для iphone4 и ipad.
cherouvim

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

Это очень плохая идея не указывать в заголовке, поскольку другие платформы тоже будут использовать их (Android, ChromeOS, Blackberry, ...)
Реми Грумо 04

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 08

Спасибо за все ваши идеи / советы. Если я сделаю 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.