苹果iOS Safari书签网站图标无法正常显示，添加到主屏幕可以使用

Question

苹果iOS Safari书签网站图标无法正常显示，添加到主屏幕可以使用

4

我正在尝试让IOS（10.2）和safari上的网站图标正常工作。当我在我的网页上点击“添加到桌面”时，会显示并添加该图标。但是当我尝试创建书签时，我只能得到一个字母占位符图像。据我所知，相同的图标应该用于书签和“添加到桌面”磁贴。

我将以下代码放在head元素中：

<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png?v=asdf">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png?v=asdf">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png?v=asdf">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png?v=asdf">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png?v=r0RW">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=r0RW">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=r0RW">
<link rel="manifest" href="/manifest.json?v=r0RW">
<link rel="mask-icon" href="/safari-pinned-tab.svg?v=r0RWdpQrAk" color="#5bbad5">
<link rel="shortcut icon" href="/favicon.ico?v=r0RW">
<meta name="theme-color" content="#ffffff">

我正在使用Python的SimpleHTTPServer进行测试，添加到书签和“添加到桌面”按钮都可以正常使用。

10.0.8.109 - - [11/May/2017 18:01:05] "GET /apple-touch-icon-120x120.png?v=asdf
HTTP/1.1" 200 -

但事实上，在Safari中并没有显示任何书签的图标。

- adekcz

2

也许它正常工作，但Safari无法获取图标？是否有基本身份验证？ - Jared Chu

我也遇到了同样的问题，你解决了吗？ - Dahdoul

2个回答

1

这些是Safari在添加书签时请求的文件：

"GET /favicon.ico HTTP/1.1" 200 -
"GET /apple-touch-icon-precomposed.png HTTP/1.1" 200 -
"GET /apple-touch-icon.png HTTP/1.1" 200 -
"GET /apple-touch-icon-120x120-precomposed.png HTTP/1.1" 200

只需确保它们全部可用，它就应该可以工作。

- Kirill Kay

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- philippe_b · Accepted Answer

请在浏览器中打开/apple-touch-icon-120x120.png?v=asdf以确保图标有效（确实是一张图片，确实为120x120像素）。

如果可以打开，问题可能来自于iOS Safari。当该浏览器需要显示已添加书签网站的图标时，有时会变得懒惰。您可以尝试以下两种方法：

重试“添加到主屏幕”。尽管听起来很粗糙，但这实际上是一个好方法。特别是如果之前在网站没有图标时多次访问了您自己的网站。您可以将此视为“超级图标缓存问题”。
尝试使用另一个iOS设备。