Apple touch icon rel: Применение Apple Touch Icon в 2019 году – для чего он создается и как настроить на сайте

Применение Apple Touch Icon в 2019 году – для чего он создается и как настроить на сайте

Apple-touch-icon.png – это миниатюрное изображение, представляющее ваш сайт на устройствах с операционной системой (iOS).

В коде страницы имеет следующий вид:

<link rel=»apple-touch-icon» href=»/touch-icon-iphone.png»>

Это изображение в основном используется на iOS, не распространяется для macOS. Для macOS используется изображение в формате svg, а атрибут rel будет иметь значение mask-icon. Важно это понимать и не путать в будущем.

Также Apple Touch Icon могут использовать другие платформы и приложения. Ведь, как правило, это изображение хорошего качества, имеющее высокое разрешение. Так, например, браузер Chrome на Android может использовать apple-touch-icon.png для сохранения ссылки с сайта на рабочий стол.

Создать его можно с помощью функции Web Clips. Web Clips – это разработка значка веб-страницы на рабочем столе яблочного девайса.

Если вы читаете эту статью на устройстве с установленной iOS и не знаете, как создавать Web Clips, можно сделать это прямо сейчас.

Для браузера Safari

1. Нажать кнопку «Поделиться»

2. В появившейся панели нажать кнопку «На экран Домой»

3. Если вас не устраивает название страницы, можно написать свое, например, 1PS. Затем нажать «Добавить».

4. Все готово – вот так выглядит Web Clips на рабочем столе устройства.

Однако не все сайты используют Apple Touch Icon. Давайте рассмотрим ситуацию, когда его нет.

Делаем все тоже самое, но на пункте 3 предыдущей инструкции видим такую картину:

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

Согласитесь, в первом случае он выглядел лучше.

Apple Touch Icon можно отнести к разряду вещей, формирующих узнаваемость вашего бренда. Этой иконкой может быть логотип вашей компании, и он должен привлекать к себе внимание и быть узнаваемым. Если посетитель на рабочем столе будет видеть просто скриншот страницы, это вряд ли положительно скажется на узнаваемости.

Возможна ситуация, что ваш сайт полон интересного контента, и пользователь решит добавить себе на рабочий стол ссылку на него, чтобы как можно чаще и удобней посещать ресурс. Но выглядеть она будет не очень привлекательно.

Чтобы этого избежать, давайте рассмотрим технические особенности создания Apple-touch-icon.png.

Техническая сторона

При создании Web Clips от устройства на сервер будут отправляться запросы в следующем порядке:

1. В первую очередь к apple-touch-icon-precomposed.png.
2. Если он не найден (от сервера получен ответ 404), то устройство сделает новый запрос к к apple-touch-icon.png.
3. Если и этот способ не увенчается успехом, то устройство сделает скриншот верхней части вашего сайта, и он будет использоваться в качестве Web Clips.

Apple-touch-icon-precomposed.png и к apple-touch-icon.

png, в чем различия?

Apple-touch-icon.png позволяет создать изображения, не запариваясь с фирменным оформлением Apple (закругленные рамки, блики). Ваше устройство все сделает самостоятельно.

<link rel=»apple-touch-icon» size=»120×120″ href=»/apple-touch-icon.png»>

С помощью apple-touch-icon-precomposed.png вы можете проявить некую творческую жилу и сделать все вручную, однако к этому формату есть свои требования – будьте внимательны.

<link rel=»apple-touch-icon-precomposed» href=»/apple-touch-icon-precomposed.png»/>

Размеры для apple-touch-icon

В 2007 году было достаточно размера 57×57, так как было только одно устройство, на котором можно было сделать Web Clips.

На сегодняшний день у компании Apple довольно обширная линейка продукции. И чтобы иконка выглядела эстетично на каждом разрешении экрана, без мыльных растянутых пикселей, можно добавить свою иконку.

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

Необязательно создавать иконки для всех разрешений экранов, достаточно будет сделать иконку размером 180×180, так как другие устройства могут уменьшить размер под свои требования.

Однако не стоит забывать о том, что не только устройства Apple используют Apple Touch Icon, поэтому можно объявить и другие размеры. Указывать размеры нужно с помощью атрибута – sizes.

Например:

<link rel=»apple-touch-icon» href=»/apple-touch-icon-57×57.png»>

Таблица размеров

На сегодняшний день Apple рекомендует дает следующие рекомендации по размерам иконок

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

Как прописать в коде apple-touch-icon?

Прописывается в <head> вашего сайта. С помощью тега <link>, по аналогии с favicon.

Для сравнения напоминание, как прописывается фавикон:

<link rel=»shortcut icon» href=»/favicon.ico» type=»image/x-icon»>

Как прописывается apple-touch-icon:

<link rel=»apple-touch-icon-precomposed» href=»/apple-touch-icon-precomposed.png»/>

<link rel=»apple-touch-icon» href=»/touch-icon-ipad.png»>

<link rel=»apple-touch-icon» href=»/touch-icon-iphone-retina.png»>

<link rel=»apple-touch-icon» href=»/touch-icon-ipad-pro.png»>

Использование в поисковой выдаче

22 мая 2019 года Google в своем блоге объявили о редизайне мобильной выдачи.Теперь в результатах мобильной поисковой выдачи будет показываться иконка сайта.

И для этой иконки может быть использован как Apple Touch Icon, так и другие форматы к примеру: <link rel=»shortcut icon» href=»/путь/значок. ico»>

Подробнее о требованиях к иконке тут.

Если вы изменили иконку или создали новую, чтобы в выдаче она обновилась как можно скорее, нужно отправить страницу на повторное сканирование.

Как это сделать, написано тут.

Заключение

Прошло уже много лет с тех пор, как появился первый iPhone и соответственно Apple-touch-icon. Теперь он может быть использован не только для оформления красивого Web Clips, но и для улучшения внешнего вида сниппета сайта в поисковой выдаче Google. А Apple Touch Icon со временем популяризировался и теперь используется другими платформами и приложениями.

Мы рассмотрели только часть возможностей для кастомизации сайта, но у Apple есть еще несколько интересных дополнений, например, Startup Image, Apple Mobile Web App Title и другие вещи, о которых расскажем в следующих статьях.

Если у вас на сайте еще нет Apple Touch Icon, обращайтесь к нам за помощью в отрисовке и размещении на сайте – с радостью поможем.

Favicons, Touch Icons, Tile Icons и т.

д. Что выбрать? / Хабр

От переводчика.

Это перевод статьи Филипа Бернарда с сайта css-tricks.com. Часть статьи, содержащую описание работы с созданным им сервисом, я позволил себе опустить. Если вы найдете ошибки, просьба сообщить о них в личном сообщении.

Статья содержит результаты проведенного им исследования, каким должен быть фавикон (и то что его заменяет), чтобы хорошо отображаться в различных случаях.

Фавикон был представлен в 1999 году, в Internet Explorer 5 (источник) и стандартизирован W3C несколько месяцев спустя. Это была маленькая иконка, представляющая сайт.

С тех пор большинство настольных браузеров следуют тенденции и используют фавикон тем или иным способом. Это очень просто, не так ли? Создать маленькую картинку и добавить в любой интернет-проект, чтобы сделать его «завершённым». Ничего сложного. Или нет?

Устроим викторину!

Каков основной файл фавикона?

Ответ: favicon. ico. Просто, чтобы удостовериться: это не PNG, переименованный в favicon.ico. Хотя, некоторые браузеры простят эту ошибку, ICO это другой формат, поддерживающий несколько версий изображения.

Вопрос: Какого размера должен быть favicon.ico?

A: 16х16. Стандартный.
B: 32х32. Разве фавикон не обновлялся некоторое время назад?
C: 64×64. Знаете, со всеми этими новыми экранами с высокой плотностью пикселей.
D: Ни один из перечисленных.

Ответ: D.

Формат favicon.ico изначально задуман Майкрософт и поддержан некоторыми другими производителями. Майкрософт рекомендует размеры 16х16, 32х32 и 48х48. Да, один ICO может содержать несколько изображений.

Браузеры обычно отображают фавикон на вкладках, и на обычных разрешениях, версия 16х16 выглядит хорошо:

16х16 на вкладке Chrome. Пока всё хорошо.

Но иконка 16х16 слишком мала для других мест: панели задач и рабочего стола.

16х16 в панели задач.

16х16 на рабочем столе. Не хорошо.

Когда иконка содержит несколько изображений, результат гораздо лучше.

16х16, 32х32 и 48х48 favicon.ico в панели задач. Выглядит как обычная программа.

16х16, 32х32 и 48х48 favicon.ico на рабочем столе. Идеально.

Вопрос: Каково назначение favicon.png?

На самом деле, чаще встречается другой файл, favicon.png. Люди часто спрашивают об этом.

Что это на самом деле?

A: Иконка для браузеров не поддерживающих favicon.ico. Такие как Firefox, наверно?
B: Иконка высокого разрешения. Знаете, со всеми этими новыми экранами с высокой плотностью пикселей.
C: Артефакт из прошлого. Теперь это новые иконки, например, Apple Touch icon.
D: Всё вместе.

Ответ: D.

Начиная с принятия HTML5, favicon.ico не слишком полезен. Был представлен атрибут sizes, позволяющий объявить несколько различных версии одной и той же иконки, и это могут быть PNG файлы:

<link rel="icon" type="image/png" href="/favicon-16x16. png">
<link rel="icon" type="image/png" href="/favicon-32x32.png">
<link rel="icon" type="image/png" href="/favicon-96x96.png">

Так что мы должны объявлять?

Давайте посмотрим правде в глаза. Хотя, почти все настольные браузеры поддерживают favicon.ico, этот файл устарел. Да, вы по-прежнему можете использовать этот файл и всё будет работать, как задумано. Но серьёзно, это устаревший формат. Он не используется нигде, кроме веба. PNG поддерживается гораздо лучше.

favicon.ico — для старых версий IE. Для остальных браузеров и последних версий IE используйте PNG иконки. Так какие sizes необходимо определять? Скоро узнаем.

Вопрос: Какой формат необходим для поддержки мобильных платформ?

Согласно SmartInsights, больше 26% веб-трафика генерируется смартфонами и планшетами. Это будущее. Что нужно для поддержки этого мира?

A: favicon.ico. Это работало 15 лет назад, работает и сегодня.
B: PNG иконки. Вы сказали, что расскажете об этом.
C: Apple Touch icon. Кэп.
D: Здесь, всё равно, нет правильного ответа.

Ответ: D. Нужны PNG иконки. И Apple Touch icon. И плитки для Windows 8. И файл под названием browserconfig.xml.

Мобильные платформы гораздо более гетерогенны, чем обычные настольные браузеры. Размеры экранов и разрешения очень сильно варьируются и нет преобладающей операционной системы, такой как Windows, как это было во времена появления интернета.

Следствие: не думайте, что мобильный фавикон может быть одной универсальной картинкой или иметь универсальное объявление в HTML коде.

Вопрос: Какого размера должны быть PNG иконки?

A: 96х96 для Google TV

B: 196х196 для Android Chrome

C: 228х228 для Opera Coast

D: Все перечисленные

Ответ: D, и даже более. Например, 160х160 для старой версии быстрого набора Opera (давно в прошлом), или 128х128 для Chrome Web Store, всё сильно зависит от платформы, которую вы собираетесь поддерживать.

Вопрос: Каков размер Apple Touch icon?

Apple Touch icon используемые iOS для закладок и сайтов «на домашнем экране». На ум приходит 57х57, браво. Это правильно. Только это было 7 лет назад, когда был выпущен первый iPhone.

Ответ: Вплоть до 180х180.

После появления первого iPhone, было 3 важных релиза:

• iPad. С экраном гораздо большего размера.
• Retina-экраны. С удвоеной плотностью пикселов.
• iOS7. Плоский дизайн отличается на iPhone/iPad.

Всего есть 9 комбинаций.

Старая 57х57 Apple Touch icon на блестящем Retina iPad. Мутно.

Большая 152х152 Apple Touch icon на Retina iPad. Аккуратно.

Если вы ответили неверно, не расстраивайтесь. Из 5000 популярных сайтов, которые предоставляют apple-touch-icon.png, менее 4% делают это правильно.

Некоторый могут возразить, что все 9 изображений не очень и нужны. Однако, по крайней мере, основная Apple Touch icon должна быть 152х152. Retina iPad под iOS 7 найдет что нужно, а младшие устройства могут уменьшить изображение.

Вопрос: Необходимо ли объявлять Apple Touch icon в HTML?

A: Не знаю. Надо же что-то ответить!
B: Да. Иначе как iOS найдет их?
C: Нет. Apple предлагает рекомендации, так что любое iOS устройство всё равно их надет.
D: Нет, но…

Ответ: D… но некоторые другие платформы тоже используют Apple Touch icon, лучше их объявить.

<link rel="apple-touch-icon" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-114x114. png">
<link rel="apple-touch-icon" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-152x152.png">

Как бы странно это не звучало, устройства под iOS не единственные, которые ищут Apple Touch icon. Поскольку они популярнее и встречаются чаще других PNG иконок высоких разрешений, некоторые браузеры, вроде Android Chrome, используют их. Таким образом, лучше их объявлять, это позволит посетителю с совместимым устройством или браузером использовать одну их.

Вопрос: Как объявить плитку для планшетов на Windows 8?

A: Планшет на Windows 8? Что это такое?
B: favicon. ico. Наследие Стива Балмера.
C: Мета-теги. Два msapplication-TileColor и msapplication-TileImage.
D: browserconfig.xml.

Ответ: C для Windows 8 и IE 10, D для Windows 8.1 и IE 11. Ответ A в чем-то тоже верен.

Объявление для Windows 8.0 выглядит как-то так:

<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

Windows 8.1 и IE 11 ожидают несколько версии изображения, объявленных в browserconfig.xml. Например:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <TileColor>#2b5797</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Новый интерфейс Metro предлагает несколько новых принципов дизайна, например, «белые силуэты», используемые большинством предустановленных программ.

Плитки сайтов в Windows 8.

Вопрос: Каков размер плитки square150x150logo?

A: 150х150. Вы не умеете читать?
B: Иной.

Ответ: B, 270х270. Майкрософт рекомендует больший размер, в целях поддержки экранов с высокой плотностью пикселов.

Поздравляем, вы закончили викторину! Как вы это сделали?

Суть этих вопросов — показать какой сложной может быть действительность, несмотря на кажущуюся простоту. Времена, когда фавикон был единственным favicon.ico давно ушли. Но старые привычки сохраняются и могут привести к абсурдным ситуациям. Мы тратим дни на аккуратный отзывчивый дизайн и добавляем только 57х57 Apple Touch icon, подходящий только для старых устройств, которыми сегодня уже почти никто не пользуется.

html — зачем использовать ?

спросил
9 лет, 4 месяца назад

Изменено
6 месяцев назад

Просмотрено
43к раз

Пока я просматривал исходный код HTML для своего любимого веб-сайта, я заметил, что он использует

  ico">

 

Очевидно, что вторая ссылка как-то связана с iOS от Apple, но почему недостаточно ? Что особенного в iOS, что у него есть специальный тег rel для ссылки html?

• html
• ios

В iOS есть концепция «веб-подборок» для веб-сайтов и приложений. Есть две основные внешние части присутствия веб-приложения iOS на устройстве iOS: его значок на главном экране (или значок веб-клипа) и его загрузочное изображение. Они представлены apple-touch-icon и apple-touch-startup-image соответственно.

Основные отличия традиционных фавиконов от значков на главном экране:

• Значки на главном экране имеют более высокое разрешение. Даже самый маленький размер значка, 29×29, больше, чем традиционный размер фавикона, который составляет 16×16. Фавиконы в формате ICO могут иметь альтернативы с высоким разрешением, но они все равно не очень хорошо поддерживались в то время, когда iOS представила веб-клипы.

• iOS до версии 7 по умолчанию применяла эффект блеска к значкам, чтобы они выглядели как дома на главном экране. Чтобы дать разработчикам возможность отключить этот эффект, Apple предоставила еще одно возможное значение: apple-touch-icon-precomposed . Конечно, в iOS 7 эти эффекты больше не применяются, но раньше было именно так.

Поскольку значки на главном экране кардинально отличаются от фавиконов, нет смысла пытаться заставить существующие схемы значков ярлыков работать на iOS. Следовательно, apple-touch-icon (и apple-touch-icon-precomposed ).

И, конечно же, после появления iPad и дисплея Retina (и их комбинации) значки на главном экране теперь бывают самых разных размеров. Теперь, когда у Apple есть свой собственный тип значков для работы, он может просто ввести свой собственный атрибут размеров для предоставления разных файлов значков для разных размеров.

Дополнительные сведения о веб-приложениях в iOS можно найти в Руководстве по веб-содержимому Safari, в частности в разделе «Настройка веб-приложений».

Когда пользователи Mac iOS добавляют в закладки или сохраняют веб-сайт в своей системе iOS, на мобильном устройстве и т. д., веб-страница сохраняется на главном экране в виде снимка экрана, что может быть очень неприятно.

Настройка значка Apple Touch для вашего веб-сайта в целом повысит визуальную оптимизацию вашего веб-сайта для пользователей iOS, что может быть очень лестным. размер для iOS с дисплеями Retina. Иконки
будет сжат для других устройств.

Фокус Все устройства

Несколько устройств Focus

2

Это изображение, которое вы увидите, если добавите веб-сайт на главный экран.

Дополнительные сведения см. в Руководстве по веб-контенту Safari.

Все текущие ответы лишь частично отвечают на вопрос. Они объясняют значение apple-touch-icon , но не значение image_src .

Этот ответ помог мне понять значение image_src . Вот что он сказал:

И image_src действительно был зарегистрирован там с информацией о том, что он используется для «указания значка веб-страницы для использования Facebook, Yahoo, Digg и т. д.», спецификация не была идентифицирована, но есть ссылка на статью об этом , и это «вероятно, избыточно с rel=icon».

Я бы добавил к этому ответу image_src — рекомендуемое изображение для использования, когда мы хотим представить веб-сайт, когда изображение PNG поддерживается для значков. Пока rel=icon — это устаревший способ сделать это, возможно, когда приложение (например, браузер) не поддерживает png.

1

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

html — значок Apple Touch для веб-сайтов

спросил
12 лет, 1 месяц назад

Изменено
1 месяц назад

Просмотрено
123к раз

До сих пор я мысленно представлял строку для значка Apple Touch следующим образом:

png" >

Однако в вопросе и ответе «Каковы правильные размеры значка Apple Touch в пикселях?» в принятом ответе указано, что теперь необходимо три изображения в соответствии с рекомендациями Apple.

Так как же вставить их в раздел заголовка кода?

• html
• mobile
• apple-touch-icon

Минималистское решение — рекомендуется вниз по мере необходимости. Объявлен с:

Полное решение — Не рекомендуется

В спецификациях Apple указаны новые размеры для iOS7:

• 60×60
• 76×76
• 120×120
• 152×152

А также для iOS8:

• 180×180

Кроме того, предварительно составленные значки устарели.

Как следствие, для поддержки как новых устройств (под управлением iOS7), так и более старых (iOS6 и более ранних версий) общий код:

  png">








 

Кроме того, вы должны создать изображение размером 180×180 с именем apple-touch-icon.png.

Обратите внимание, что iOS ищет URL вида /apple-touch-icon-76x76.png , если не находит интересного в коде HTML (немного похоже на то, что IE делает с /favicon.ico ). Поэтому важно сохранить имена файлов, если они указаны выше. Также важно учитывать, что Android/Chrome также использует эти изображения.

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

13

Вот, пожалуйста, надеюсь, это поможет.

Если вы хотите, чтобы Apple сделала для вас эстетическую часть (добавила глянца), вы должны поместить их в теги :

Если вы хотите предварительно скомпоновать изображение, чтобы Apple отображала его без глянца, вы должны сделать следующее:

 


 png" />
 

Если вы включите более одного изображения, устройство iOS будет искать изображение правильного размера и использовать его автоматически. Как видно из названий изображений в примере, для iPad с дисплеем Retina требуется значок размером 144×144 пикселей, для iPhone 4/4S/5 требуется значок размером 114×114 пикселей, для исходного iPad (и iPad 2, поскольку разрешение экрана ничем не отличается) нужна иконка размером 72x72px, а для оригинального iPhone не требуется указание размера, но для справки это 57x57px.

4

Поскольку некоторые из этих ответов уже устарели, я рекомендую использовать http://realfavicongenerator.net/ для создания всех изображений и разметки — я жертвую пару евро каждый раз, когда использую его, в надежде, что он их активирует чтобы быть в курсе того, что в настоящее время действует на iOS, Android и Windows, поэтому мне не нужно.

3

По состоянию на 2018 год веб-сайт разработчиков Apple рекомендует следующее для устройств iOS:

  png">
  
  
  
  
  
 

Название приложения заменит название вашего веб-сайта. Обычно вы этого хотите.
Начальное изображение — это то, что будет отображаться при запуске приложения.

Указание значка веб-страницы для веб-клипа

Возможно, вы захотите, чтобы пользователи могли добавлять ваше веб-приложение или ссылку на веб-страницу на главный экран. Эти ссылки, представленные значком, называются веб-клипами. Выполните эти простые шаги, чтобы указать значок для представления вашего веб-приложения или веб-страницы на iOS.

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

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

В приведенном выше примере замените custom_icon.png именем файла значка.
Чтобы указать несколько значков для разных разрешений устройства — например, для поддержки устройств iPhone и iPad — добавьте атрибут размеров к каждому элементу ссылки следующим образом:

Используется значок наиболее подходящего размера для устройства. Если атрибут размеров не установлен, размер элемента по умолчанию равен 60 x 60.
Если нет значка, соответствующего рекомендуемому размеру для устройства, используется наименьший значок, превышающий рекомендуемый размер. Если нет значков большего размера, чем рекомендуемый, используется самый большой значок.

Если значки не указаны с помощью элемента ссылки, в корневом каталоге веб-сайта выполняется поиск значков с префиксом apple-touch-icon…. Например, если соответствующий размер значка для устройства составляет 60 x 60, система ищет имена файлов в следующем порядке:

 apple-touch-icon-76x76.png
apple-touch-icon.png
 

См. Размеры значков и изображений для получения информации о показателях значков веб-страниц.

Примечание : Safari на iOS 7 не добавляет эффекты к значкам. Старые версии Safari не будут добавлять эффекты для файлов значков с суффиксом -precomposed.png. Дополнительные сведения см. в разделе «Первые шаги: идентификация вашего приложения в iTunes Connect».

Источник: характеристики Apple Touch Icon

1

Из моего пулл-реквеста на https://github.com/h5bp/mobile-boilerplate (с иконками iPhone 6):

 
 png">













 png">








 

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

 apple-touch-icon-72x72.png
 яблоко-тач-значок-76x76.png
 яблоко-тач-значок-120x120.png
 яблоко-тач-значок-152x152.png
 apple-touch-icon-72x72-precomposed.png
 apple-touch-icon-76x76-precomposed.png
 apple-touch-icon-120x120-precomposed.