html - 如何正确设置iPhone的favicon？

Question

我已在 realfavicongenerator.net 上生成了 favicon，但该 favicon 未在 iPhone 6S 上的 Safari 中显示。我已经清除了历史记录和网站数据，但没有帮助。这是我的 HTML 代码:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/apple-touch-icon-precomposed.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="194x194" href="/favicon-194x194.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">

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

如您所见，我添加了rel="icon"和rel"快捷方式图标"以及预组合图标，但没有任何帮助。我在网上查看过，找不到解决方案。我还能做些什么吗？

Answer 1

全面披露:RealFaviconGenerator 的作者发言。

首先，您应该运行 favicon checker针对您的网站，以发现无效 URL 等错误。

如果测试结果为阳性，您可以确信您的触摸图标配置正确。即使您已清除浏览器缓存，您也可能遇到缓存问题。作为解决方法，您可以尝试使用其他设备或等待几个小时然后重试。