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

Question

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

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

Hanselman и playsblues * В комментариях 1008 * предлагаются различные размеры, включая 163x163 и 60x60.

Иконка Apple apple.com - 129x129!

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

Answer 1

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

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

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

• Руководство по интерфейсу пользователя iOS (2013 г .; Apple Inc; PDF; 26,3 МБ)

Answer 2

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

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

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

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

Чтобы переопределить значок закладки сайта на определенную веб-страницу, вставьте элемент похож на <ссылка отн = «яблоко-сенсорный значок» href = "/ customIcon.png" /> в пределах элемент страницы.

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

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

Answer 3

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

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

Answer 4

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

• Руководство по веб-контенту Safari (2012 г .; Apple Inc; PDF; 6,91 МБ)

Answer 5

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

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

• HOWTO: значки веб-клипов для iPhone (январь 2008 г .; Дэн Дикинсон)

Answer 6

Спецификации 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 может генерировать все эти изображения одновременно. Полное раскрытие: я автор этого сайта.

Answer 7

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

Answer 8

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

Answer 9

Обновлен список октябрь 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 x 76 px для iPad без сетчатки

Answer 10

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

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

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