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

Question

我正在使用由realfavicongenerator.net生成的语法来指定所有网站图标大小，但由于某种原因，该图标未显示在 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 用户说他清除了他的缓存仍然没有看到它）。

Answer 1

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

<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 }}">