logo标签列表

网站图标在 iPhone 6（主屏幕）上无法显示

htmliosiphonefavicon
5
我正在使用由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- 可能与问题有关）

Home screen on iPhone 6

更新： 当使用“添加书签”时，图标会出现，但在“添加到主屏幕”时不会出现。我已经更改了网站上生成的协议相对URL（//cdn...）以HTTPs开头，以测试是否可能是问题所在，并且似乎并没有解决它（一个清除了缓存的iPhone 6用户仍然看不到它）。
1
你最终解决了这个问题吗？我的测试似乎表明，在IOS上，只有使用HTTP协议时，“添加到主屏幕”才有效。 - Hugh Chapman
有趣的是...不幸的是，我从来没有弄清楚为什么会发生这种情况或如何解决它。 - jwinn
这里也有同样的问题，@jwinn 你最近有更新吗？ - Edu Lomeli
2个回答
0

虽然这是一个老问题，但这里有答案。由于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 }}">
那不是问题所在。帖子中的URL确实是使用液态资产网址生成的。 - jwinn
以上语法可以在 iPhone 6 上生成适当的图标。祝你好运。 - Claire
0

我遇到了这个问题并尝试了大约100种方法来解决它。在iPad（主屏幕+书签）、Android、IE、Chrome（Windows + Apple）、Safari（桌面版）上都显示网站图标，但在iPhone 6 Safari上不显示。

问题最终是使用相对链接而不是绝对链接造成的。

当我将favicon img hrefs从href="/favicon.png"替换为href="https://website.com/favicon.png"时，问题得到了解决。虽然不知道为什么会这样，但这解决了问题...

顺便说一下，Favicon文件在我的根网站目录中。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接