我已经能够设置它,以便在我将网站添加到 iOS 主屏幕时显示正确的图标。它还显示在任何网络浏览器中。但是,当我使用 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 但没有用。
提前致谢。
最佳答案
感谢您的提问。它让我检查了我自己的网站,我发现你是对的。我最喜欢的图标没有在 Safari 中显示。相反,有一个带有我网站首字母的默认图标。
快速搜索后,我找到了这个很棒的页面:http://realfavicongenerator.net/
您不仅可以检查现有图标,还可以让您上传图标并在各种设备/系统上再次测试。然后替换单个图像(例如,我有一个用于 iOS 主屏幕的彩色 png,但一个用于 safari 书签的单色矢量,还有一个用于 android)。
然后只需生成并下载图标包并将其上传到您的服务器,将生成的代码包含在<head>
中你的页面,你很高兴去。
更新
对我来说,它现在似乎可以与您的网站一起使用:
关于html - iOS 书签图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43984104/