iOS 书签图标

Question

iOS 书签图标

5

我已经成功地设置了当我将网站添加到iOS主屏幕时，正确的图标会显示。它在任何Web浏览器中都能显示。然而，当我使用iOS Safari访问网站并将其添加到书签列表时，这个图标却显示为C。我希望我们的图标也可以像www.apple.com或www.sunsetwx.com一样正常显示。这是我们的网站：www.cbcexeter.org

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=kPgOnJYLYR">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=kPgOnJYLYR">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=kPgOnJYLYR">
<link rel="manifest" href="/manifest.json?v=kPgOnJYLYR">
<link rel="mask-icon" href="/safari-pinned-tab.svg?v=kPgOnJYLYR" color="#bd4c4c">
<link rel="shortcut icon" type="image/png" href="/favicon.png?v=kFginJYoYs">
<meta name="theme-color" content="#ffffff">

我尝试了.ico文件，但它没有生效。

提前感谢您。

- James

2个回答

4

我强烈建议使用http://realfavicongenerator.net/。它可以自动化整个过程并生成图标，以及复制粘贴代码和设置说明。

- KidCoder

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

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

- xxtesaxx · Accepted Answer

谢谢您的问题。它让我检查了我的网站，我发现您是正确的。我的收藏夹图标在Safari中没有显示。相反，有一个默认图标，带有我的网站起始字母。

经过快速搜索，我找到了这个很棒的页面：http://realfavicongenerator.net/ 它不仅可以检查您现有的图标，还可以让您上传您的图标，并测试它与各种设备/系统的兼容性。然后替换单个图像（例如，我有一个用于iOS主屏幕的彩色png，一个用于safari书签的单色向量，另一个用于android）。

然后只需生成并下载图标包，并将其上传到您的服务器，在页面的<head>中包含所生成的代码，您就可以开始使用了。

更新：

对我来说，现在它看起来已经适用于您的网站了。