网站favicon未出现在iPhone 6上（主屏幕）

Question

我正在使用 realfavicongenerator.net 生成的语法来指定所有的favicon大小，但由于某种原因，iPhone 6上没有显示图标（3个单独的设备，浏览器缓存已清除）。它显示的是该网站的屏幕截图。任何想法为什么会这样？

我查看了我能找到的关于最新语法的每篇文章（包括Mathias Bynens的文章;在我尝试使用realfavicongenerator之前，我有最初的确切语法，同样的问题）。 iPhone 6应该使用指定的尺寸。运行favicon checker全面显示绿色。我已经三次检查了源中的所有链接都是正确的。

<!--Favicon and Apple Touch Icons-->
<link rel="apple-touch-icon" sizes="57x57" href="//cdn.shopify.com/s/files/1/0171/0160/t/3/assets/apple-touch-icon-57x57.png?18609">
<link rel="apple-touch-icon" sizes="60x60" href="//cdn.shopify.com/s/files/1/0171/0160/t/3/assets/apple-touch-icon-60x60.png?18609">
<link rel="apple-touch-icon" sizes="72x72" href="//cdn.shopify.com/s/files/1/0171/0160/t/3/assets/apple-touch-icon-72x72.png?18609">
<link rel="apple-touch-icon" sizes="76x76" href="//cdn.shopify.com/s/files/1/0171/0160/t/3/assets/apple-touch-icon-76x76.png?18609">
<link rel="apple-touch-icon" sizes="114x114" href="//cdn.shopify.com/s/files/1/0171/0160/t/3/assets/apple-touch-icon-114x114.png?18609">
<link rel="apple-touch-icon" sizes="120x120" href="//cdn.shopify.com/s/files/1/0171/0160/t/3/assets/apple-touch-icon-120x120.png?18609">
<link rel="apple-touch-icon" sizes="144x144" href="//cdn.shopify.com/s/files/1/0171/0160/t/3/assets/apple-touch-icon-144x144.png?18609">
<link rel="apple-touch-icon" sizes="152x152" href="//cdn.shopify.com/s/files/1/0171/0160/t/3/assets/apple-touch-icon-152x152.png?18609">
<link rel="apple-touch-icon" sizes="180x180" href="//cdn.shopify.com/s/files/1/0171/0160/t/3/assets/apple-touch-icon-180x180.png?18609">
<link rel="icon" type="image/png" href="//cdn.shopify.com/s/files/1/0171/0160/t/3/assets/favicon-32x32.png?18609" sizes="32x32">
<link rel="icon" type="image/png" href="//cdn.shopify.com/s/files/1/0171/0160/t/3/assets/favicon-192x192.png?18609" sizes="192x192">
<link rel="icon" type="image/png" href="//cdn.shopify.com/s/files/1/0171/0160/t/3/assets/favicon-160x160.png?18609" sizes="160x160">
<link rel="icon" type="image/png" href="//cdn.shopify.com/s/files/1/0171/0160/t/3/assets/favicon-96x96.png?18609" sizes="96x96">
<link rel="icon" type="image/png" href="//cdn.shopify.com/s/files/1/0171/0160/t/3/assets/favicon-16x16.png?18609" sizes="16x16">
<link rel="shortcut icon" href="//cdn.shopify.com/s/files/1/0171/0160/t/3/assets/favicon.ico?18609">

（该网站位于Shopify中 - 可能与该问题有关）

更新： 使用添加书签时会出现图标，但不会添加到主屏幕。我已经在网站上更改了生成的协议相对URL（// cdn ...）以开始使用HTTP来测试这是否可能是问题，并且似乎没有修复它（iPhone 6用户说他清除了他的缓存仍然没有看到它。）

Answer 1

老问题，但这里是答案。由于Shopify使用自己的（.liquid）文件类型，因此它会通过自己的语法查找链接。将每个favicon文件上传到您的资源文件夹，然后将您的绝对链接更改为以下内容：

<link rel="apple-touch-icon" sizes="57x57" href="{{ 'apple-touch-icon-57x57.png' | asset_url }}">
<link rel="apple-touch-icon" sizes="60x60" href="{{ 'apple-touch-icon-60x60.png' | asset_url }}">
<link rel="apple-touch-icon" sizes="72x72" href="{{ 'apple-touch-icon-72x72.png' | asset_url }}">
<link rel="apple-touch-icon" sizes="76x76" href="{{ 'apple-touch-icon-76x76.png' | asset_url }}">
<link rel="apple-touch-icon" sizes="114x114" href="{{ 'apple-touch-icon-114x114.png' | asset_url }}">
<link rel="apple-touch-icon" sizes="120x120" href="{{ 'apple-touch-icon-120x120.png' | asset_url }}">
<link rel="apple-touch-icon" sizes="144x144" href="{{ 'apple-touch-icon-144x144.png' | asset_url }}">
<link rel="apple-touch-icon" sizes="152x152" href="{{ 'apple-touch-icon-152x152.png' | asset_url }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ 'apple-touch-icon-180x180.png' | asset_url }}">
<link rel="icon" type="image/png" href="{{ 'favicon-32x32.png' | asset_url }}" sizes="32x32">
<link rel="icon" type="image/png" href="{{ 'favicon-192x192.png' | asset_url }}" sizes="192x192">
<link rel="icon" type="image/png" href="{{ 'favicon-160x160.png' | asset_url }}" sizes="160x160">
<link rel="icon" type="image/png" href="{{ 'favicon-96x96.png' | asset_url }}" sizes="96x96">
<link rel="icon" type="image/png" href="{{ 'favicon-16x16.png' | asset_url }}" sizes="16x16">
<link rel="shortcut icon" href="{{ 'favicon.ico' | asset_url }}">

Answer 2

我遇到了这个问题，并尝试了约100种不同的方法来解决它。 Favicon在ipad（主屏幕+书签），android，IE，chrome（Windows +苹果），safari（桌面）上显示，但未在iphone 6 safari上显示。

事实证明，该问题是使用相对链接而不是绝对链接。

当我将图标图标img hrefs从href="/favicon.png"替换为href="https://website.com/favicon.png"时，问题已解决。为何会这样没有道理，但这解决了问题...

收藏夹文件位于我的根站点目录btw中。