IOS X Safari收藏夹图标给出404错误

时间:2017-01-05 14:12:51

标签: ios html5 mobile-safari favicon

在添加到书签/收藏夹时,我的图标显示在除Safari的IOS 10之外的所有其他浏览器上,无法找出遗漏或不合适的地方,并且在论坛或文档上没有帮助。有人可能会告诉我在IOS 10中Safari使用默认路径向收藏夹添加图标吗?

这是我的代码:

<link rel="apple-touch-icon-precomposed" href="http://www.mainboard.com/apple-touch-icon-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="http://www.mainboard.com/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="http://www.mainboard.com/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.mainboard.com/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="http://www.mainboard.com/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.mainboard.com/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="http://www.mainboard.com/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://www.mainboard.com/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="http://www.mainboard.com/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="http://www.mainboard.com/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="http://www.mainboard.com/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="http://www.mainboard.com/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="http://www.mainboard.com/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="http://www.mainboard.com/favicon-128.png" sizes="128x128" />
<link rel="icon" type="image/png" href="http://www.mainboard.com/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="http://www.mainboard.com/favicon-196x196.png" sizes="196x196" />
<meta name="application-name" content="MAINBOARD"/>
<meta name="msapplication-TileImage" content="http://www.mainboard.com/mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="http://www.mainboard.com/mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="http://www.mainboard.com/mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="http://www.mainboard.comm/stile-310x150.png" />
<meta name="msapplication-square310x310logo" content="http://www.mainboard.com/mstile-310x310.png" />
<link rel="manifest" href="http://www.mainboard.com/manifest.json">
<link rel="mask-icon" href="http://www.mainboard.com/safari-pinned-tab.svg" color="#fff">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="http://www.mainboard.com/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">

1 个答案:

答案 0 :(得分:1)

我建议您将自己的网站提交到favicon checker。如果将检查您的标记和图标。在写这个答案的时候,它是全绿色的。所以你几乎可以肯定一切都没问题。完全披露:我是这项服务的作者。

请记住,浏览器对于favicon来说往往非常懒惰。例如,favicon缓存是一个经常性的Web开发问题。在iOS Safari的情况下,我经常观察到Safari并不总是在书签时按时加载图标。结果:在测试触摸图标时,您会感觉它不起作用。它确实有效,但你必须在一分钟后再试一次。令人沮丧。另一个可能的问题是,作为网站作者,您不断访问正在开发的网站。也许Safari认为你的触摸图标坏了(也许它在某个时刻:毕竟这是一个dev下的网站)所以它不会重新加载它,但最终会这样做......稍后。

我的建议是尝试使用其他iOS设备,如果你有一台可供使用的设备。