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