Каковы правильные размеры в пикселях для значка с сенсорным экраном Apple?

Я не уверен, какой должен быть правильный размер.

Многие сайты, кажется, повторяют, что значок яблочного сенсорного экрана должен быть 57x57 пикселей, но в качестве источника ссылаются на неработающую ссылку.

Hanselman «s и playgroundblues » комментарии S предлагают различные размеры , включая 163x163 и 60x60.

Собственный Apple, значок apple.com является 129x129!

См. Мой связанный с этим вопрос: Как мне дать своим веб-сайтам значок для iPhone?

Ответов (11)

Решение

Похоже, что рекомендации Apple от 3 августа 2010 г. теперь включают изображения с «высоким разрешением» (для iPhone 4) в их «обязательные» размеры значков.

Похоже, теперь нам нужно предоставить изображение 57x57 и 114x114, а также титульное изображение 640x960.

См. Рекомендации по созданию пользовательских значков и изображений (требуется Javascript), которые являются частью всего документа:

В зависимости от того, сколько деталей вы хотите, чтобы он имел соотношение сторон 1: 1 (в основном - он должен быть квадратным).

Я бы выбрал собственный от Apple 129 * 129

Из кеша Google в Apple Developer Connection - Центр разработки веб-приложений - Разработка контента ...

Создание значка закладки веб-клипа

iPhone и iPod touch позволяют пользователю сохранять закладку Web Clip на ваш сайт на главном экране.

Чтобы указать значок закладки для всех страниц веб-сайта, поместите изображение PNG с именем «apple-touch-icon.png» в корневой каталог веб-сервера - аналогично «favicon.ico» для значков сайта.

Чтобы переопределить значок закладки сайта на определенной веб-странице, вставьте элемент <link>, аналогичный <link rel = "apple-touch-icon" href = "/ customIcon.png" />, в элемент <head> страницы. .

Размер значка закладки должен составлять 57x57 пикселей. Если значок другого размера, он будет масштабирован и обрезан по размеру.

Safari автоматически объединит значок со стандартным «стеклянным» оверлеем, чтобы он выглядел как встроенное приложение для iPhone или iPod.

Обновленный список Октябрь 2014 г., iOS8

Список для iPhone и iPad с сетчаткой и без нее

<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">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png"> 

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

Для iOS 8 и Iphone 6 plus

<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png"> 

Iphone 6 использует то же изображение размером 120 x 120 пикселей, что и 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 без сетчатки

В спецификациях Apple указаны новые размеры для iOS7:

  • 60x60
  • 76x76
  • 120x120
  • 152x152

В то время как старые размеры для iOS6 и более ранних версий:

  • 57x57
  • 72x72
  • 114x114
  • 144x144

Кстати, предварительно составленные значки устарели.

Как следствие, для поддержки новых устройств (под управлением iOS7) и более старых (iOS6 и ранее) эти 8 изображений должны присутствовать, а общий код выглядит следующим образом:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">    
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">

Кроме того, вы должны создать картинку размером 152x152 с именемapple-touch-icon.png .

Возможно, вы захотите узнать, что этот генератор значков может генерировать все эти изображения одновременно. Полное раскрытие: я являюсь автором этого сайта.

Вам больше не нужно беспокоиться о правильном размере. Если у вас есть файл изображения itune (т.е. файл размером 1024 * 1024) вашего значка, то я создал это приложение, которое предоставит вам все значки на основе информации, представленной здесь . Загрузите приложение отсюда и следуйте инструкциям в файле readme, чтобы создать все необходимые значки для приложения iOS.

Официальный размер - 57х57. Я бы рекомендовал использовать точный размер просто потому, что он занимает меньше памяти при загрузке (если Apple не кэширует масштабированное представление). С учетом сказанного, Рекс прав в том, что подойдет любой квадрат.

Я не думаю, что существует «правильный размер». Поскольку iPhone действительно работает под управлением OSX, система рендеринга значков довольно надежна. Пока вы даете ему высококачественное изображение с правильным соотношением сторон и разрешением, по крайней мере, таким же высоким, как и фактический результат, ОС будет очень аккуратно уменьшать масштаб. На моем сайте используется размер 158x158, и значок на экране iPhone выглядит идеально.

Ссылка NilObject привела меня к отличному сообщению в блоге Catchup on your Icon на makentosh.com

... Конечно, со всей этой непоследовательностью нужно было со временем разобраться, не так ли? Ну и 2.0 с этим справился отлично! Наконец, 57x57 фактически означало 57x57.

... каждый пиксель ... отрисован идеально.

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

Однако на многих сайтах, не принадлежащих к NDA, есть руководства по созданию значков. Например здесь:

Как часть своего руководства по веб-содержимому Safari, Apple фактически имеет общедоступную страницу под названием « Указание значка веб-страницы для веб-клипа » (требуется Javascript), которая охватывает все разрешения и их реализацию.