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

StackOverflow https://stackoverflow.com/questions/1598

Вопрос

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

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

Гензельман'песок детская площадкаблюзВ комментариях пользователя предлагаются разные размеры, включая 163x163 и 60x60.

собственный Apple значок apple.com это 129х129!

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

Это было полезно?

Решение

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

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

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

Другие советы

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

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

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

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

Чтобы переопределить значок сайта закладки на определенной веб -странице, вставьтеu003Clink> элемент похож наu003Clinkn rel="apple-touch-icon"n href="/customIcon.png"/> внутриu003Chead> элемент страницы.

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

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

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

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

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

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

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

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

Характеристики Apple укажите новые размеры для iOS7:

  • 60х60
  • 76x76
  • 120х120
  • 152x152

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

  • 57x57
  • 72х72
  • 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.

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

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

Ссылка NilObject привела меня к замечательному сообщению в блоге Следите за своей иконкой в makentosh.com

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

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

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

Обновленный список, октябрь 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">

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

Для iOS 8 и Iphone 6 плюс

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

Iphone 6 использует то же изображение размером 120 x 120 пикселей, что и iPhone 4 и 5, остальное такое же, как и в iOS 7.

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

Для 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 без сетчатки
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top