Проблемы с отображением значка Web Clip/Apple Touch

Question

Я испытываю трудности с тем, чтобы значок Apple Touch работал последовательно на некоторых устройствах.

Устройства с проблемами, как правило, айфонов, и я считаю, что они 6S. Мои иконки настроены так:

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

Мне дали iPhone 6S для тестирования, так как я не мог воспроизвести проблему на своих устройствах Android. Мне удалось продублировать проблему, поэтому я добавил эту строку сверху:

<link rel="apple-touch-icon" href="/SiteAssets/LandingTouchIcons/apple-touch-icon-180x180.png" />

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

Я просто попробовал еще раз на другом iPhone, который никогда не посещал сайт, и он не работает.

Это на сайте "SharePoint Online/O365". Идеи о том, что может быть причиной этого безумия?

Answer 1

В iOS Safari часто возникают противоречия в отношении значка Touch и добавления на главный экран. Я предлагаю вам повторить попытку несколько раз с iPhone, который не работает. Скорее всего: он в конечном итоге будет учитывать значок. Определенно не тот ответ, который вы ожидали...

В качестве гипотезы для этого неожиданного наблюдения: возможно, Safari не спешит обрабатывать значок Touch (в конце концов, в отличие от HTML, CSS и других ресурсов, значок Touch не требуется для отображения страницы), поэтому он недоступен при добавлении на домашний экран вскоре после открытия страницы. А поскольку вы хотели протестировать функцию "Добавить на главный экран", вы, вероятно, зашли на свой сайт и сразу же добавили его на главный экран. Что, я полагаю, не является обычным сценарием (посетители тратят как минимум несколько секунд на создание закладки сайта).