iPhone 收藏网址[添加到书签] 和 [添加到主屏幕] 显示自定义图标,而不是网页截图:
<!-- Safari浏览器[添加到书签] -->
<link rel="shortcut icon" href="static/my/img/favicon.ico">
<!-- Safari浏览器[添加到主屏幕] -->
<link rel="apple-touch-icon" href="static/my/img/favicon.ico"/>
https://www.zhihu.com/question/19572446
在网站根目录放一张命名为 apple-touch-icon.png 的 57 × 57 像素图片即可达到基本目的。
如果需要更精确的控制:
1. 在网站 head 部分添加以下语句,其中 href 属性值是图片的路径。
<link rel="apple-touch-icon" href="/custom_icon.png"/>
2. 为满足不同分辨率设备的显示效果,可以添加三个不同分辨率的图片:57 × 57 像素用于前三代 iPhone 和 iPod touch ,72 × 72 像素用于 iPad ,114 × 114 像素用于采用 Retina display 的 iPhone 4 和 iPod touch 等后续产品。通过 sizes 属性控制:
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
3. 还可以把 rel 属性修改为“apple-touch-icon-precomposed”来避免 iOS 向你的图标添加高光效果。
作者:架构师小跟班
开发者导航: http://www.codernav.com
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
如果文中有什么错误,欢迎指出,以免更多的人被误导。