码迷,mamicode.com
首页 > Web开发 > 详细

iPhone 收藏网址[添加到书签] 和 [添加到主屏幕] 显示自定义图标,而不是网页截图

时间:2018-07-21 00:10:23      阅读:713      评论:0      收藏:0      [点我收藏+]

标签:网站   像素   ipad   书签   http   size   网址   收藏   link   

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 向你的图标添加高光效果。

 

iPhone 收藏网址[添加到书签] 和 [添加到主屏幕] 显示自定义图标,而不是网页截图

标签:网站   像素   ipad   书签   http   size   网址   收藏   link   

原文地址:https://www.cnblogs.com/xyhero/p/9344600.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!