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

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

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

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

Apple значок apple.com составляет 129x129!

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

Ответ 1

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

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

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

Ответ 2

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

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

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

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

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

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

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

Ответ 3

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

Я бы пошел с Apple, владеющим 129 * 129

Ответ 4

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

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

Ответ 6

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

Ответ 7

Спецификации Apple определяют новые размеры для iOS7:

  • 60х60
  • 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 generator может генерировать все эти снимки сразу. Полное раскрытие: я автор этого сайта.

Ответ 8

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

Ответ 9

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

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

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

Ответ 10

Обновленный список Октябрь 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 x 114 px до 120 x 120 пикселей
  • для iPad Retina от 144 x 144 px до 152 x 152 px

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

  • 57 x 57 пикселей по умолчанию
  • 76 x 76 px для iPads без сетчатки.

Ответ 11

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