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

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

我已经看过了我能找到的关于最新语法的每一篇文章（包括Mathias Bynens的文章；在我尝试realfavicongenerator之前，我最初就有了同样的语法，但也有同样的问题）。iPhone 6应使用指定的尺寸。全面推行绿色环保计划。我已经三次检查了源代码中的所有链接是否正确

<!--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…）更改为以HTTPs开头，以测试这是否是问题所在，但这似乎并没有解决问题（一名iPhone 6用户说他清除了缓存，但仍然没有看到它）。

旧问题，但这里是答案。由于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 }}">

---

我遇到了这个问题，尝试了大约100种不同的方法来解决它。Favicon出现在ipad（主屏幕+书签）、android、IE、chrome（windows+苹果）、safari（桌面）上，但没有出现在iphone 6 safari上

问题是使用了相对链接而不是绝对链接

当我将favicon img href从

href=“/favicon.png”

替换为

href=”时https://website.com/favicon.png“

问题已解决。为什么会这样是没有道理的，但这解决了问题

---

Favicon文件在我的根站点目录中。顺便说一句。

你知道这个吗？我的测试似乎表明，只有在采用HTTP协议的情况下，添加到IOS主屏幕才起作用。有趣的是……不幸的是，我从来没有弄清楚为什么会发生这种情况，或者如何解决它。同样的问题，您是否有@jwinn的最新更新？这不是问题所在。帖子中的url确实是使用liquid asset_url生成的。上述语法在iPhone 6上生成了一个正确的图标。祝你好运