html - iOS 书签图标

标签 html ios

我已经能够设置它,以便在我将网站添加到 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>中你的页面,你很高兴去。

更新

对我来说,它现在似乎可以与您的网站一起使用:

enter image description here

enter image description here

关于html - iOS 书签图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43984104/

相关文章:

html - 高度=设备高度和window.innerHeight

ios - 在没有 iPhone6s 或更新版本的情况下测试 ARKit

iphone 的 Python 服务器端推送通知

html - Internet Explorer 8 中隐藏的顶部 TD 边框

html - 如何设置 google cse 样式

javascript - 为什么 Web 应用程序通过网络发送 HTML?

iphone - 我可以在 iPhone 移动版 Safari 上访问所有打开的网站的 URL 吗?

ios - 将 Cocoapods 链接为共享的 iOS 8 库

ios - 图片只全屏显示一次

javascript - JS拖放图片URL