Web Clip/Apple Touch 图标显示问题

Posted 2023-03-10

【中文标题】Web Clip/Apple Touch 图标显示问题

【英文标题】：Web Clip/Apple Touch Icon display issues

【发布时间】：2016-01-12 15:31:14

【问题描述】：

我很难让苹果触摸图标在某些设备上始终如一地工作。

有问题的设备通常是 iPhone，我相信它们是 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”网站上。关于什么可能导致这种疯狂的想法？

【参考方案1】：

ios Safari 在触控图标和添加到主屏幕方面经常出现不一致的行为。我建议您使用不起作用的 iPhone 重试几次。机会是：它最终会考虑到图标。绝对不是您预期的答案...

作为这个意外观察的假设：也许 Safari 并不急于处理 Touch 图标（毕竟，与 html、CSS 和其他资源不同，Touch 图标不是显示页面所必需的）所以它不可用当您在打开页面后不久添加到主屏幕时。而且因为您想测试添加到主屏幕功能，您可能访问了您的站点并立即将其添加到主屏幕。我想这不是常规情况（访问者在为网站添加书签之前至少要花费几秒钟）。