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

Posted 2020-12-05 xyhero

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