Question

我已经能够设置它，以便当我将网站添加到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而且它没有用。

提前致谢。

Answer 1

感谢您的提问。它让我看看我自己的网站，我发现你是对的。我的fav图标没有在Safari中显示。相反，我的网站的起始字母有一个默认图标。

快速搜索后，我找到了这个很棒的页面：http://realfavicongenerator.net/

您不仅可以查看现有图标，还可以上传图标并在各种设备/系统中再次测试。然后替换单个图像（例如，我有一个用于iOS主屏幕的彩色png，但是用于safari书签的单色矢量，还有一个用于android的单色矢量）。

然后只需生成并下载图标包并将其上传到您的服务器，将生成的代码包含在您网页的<head>中即可。

<强>更新

对我而言，现在看来它正在与您的网站合作：

Answer 2

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

iOS书签图标

2 个答案: