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

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

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

Комментарии Хансельмана и детской площадки предлагают различные размеры, включая 163x163 и 60x60.

Собственная иконка Apple.com - 129x129!

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

11 ответов

Решение

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

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

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

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

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

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

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

Чтобы переопределить значок закладки сайта на определенной веб-странице, вставьте элемент , аналогичный , в элемент страницы.,

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

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

Спецификации 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,

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

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

Я бы пошел с собственным яблоком 129*129

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

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

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

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

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

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

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

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

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

Обновлен список октябрь 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 px, что и iphone 4, а 5 - то же самое, что и для iOS 7

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

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

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

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

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