Сочетание типов ссылок "icon" и "apple-touch-icon"

Question

Mobile Safari требует использования следующего заклинания для значков с более высоким разрешением, чем в традиционном формате 16x16:

<link rel="shortcut icon" href="old-16x16-favicon.ico" />
<link rel="apple-touch-icon" sizes="158x158" href="my-new-158x158-icon.png" />

Однако Firefox требует использования синтаксиса HTML5, например:

<link rel="shortcut icon" href="old-16x16-favicon.ico" />
<link rel="icon" type="image/png" sizes="158x158" href="my-new-158x158-icon.png" />

Теперь я ожидаю, что будет возможно объединить их в одну строку следующим образом.

<link rel="shortcut icon" href="old-16x16-favicon.ico" />
<link rel="icon apple-touch-icon" type="image/png" sizes="158x158" href="my-new-158x158-icon.png" />

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

Answer 1

Это решение очень перспективно. К сожалению, это не работает.

Я только что попробовал с iPad Mini под iOS 7.0.4 и Safari со следующим кодом:

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

Два замечания об этом коде:

• Размеры указаны для iOS7 (например, 60x60) и более ранних версий (например, 57x57).
• Имена файлов были намеренно изменены, чтобы не соответствовать соглашениям Apple об именах. Например, я мог видеть в журнале сервера, что Safari пытается получить доступ apple-touch-icon-76x76.pngчто бы ни говорил HTML код. Поэтому нужно было использовать специальные имена, чтобы не быть обманутыми.

Результаты, достижения:

• При добавлении ссылки на главный экран Safari не может найти подходящее изображение. Предлагает миниатюру сайта.
• При закладке страницы Safari делает снимок размером 57х57. Это странно, поскольку этот размер неправильный (мое устройство больше интересует иконки размером 76х76) и предназначен для iOS6 и более ранних версий.

Жаль, это решение выглядит хорошо. Тем не менее, даже если этот тест был успешным, нужно было выполнить гораздо больше тестов, поскольку на нескольких платформах используются значки Apple. В частности, Android. Таким образом, даже если устройства iOS были бы достаточно умны, чтобы справиться с этим трюком, некоторые другие существующие или будущие устройства могут выйти из строя.