iOS书签显示favicon而非apple-touch-icon及图标优先级与自定义咨询

首先明确iOS处理书签图标的优先级规则，按从高到低排序是这样的：

• 优先读取页面中声明的apple-touch-icon-precomposed.png（这个图标不会被iOS自动添加圆角和高光效果，完全保留你设计的样式）
• 其次是apple-touch-icon.png（iOS会自动给这个图标加上默认的圆角和渐变高光）
• 如果以上两个专门的iOS图标都没有配置，iOS才会 fallback 到页面里的favicon（比如favicon.ico或者通过<link rel="icon">定义的图标）

至于能不能设置和favicon不同的书签图标？当然可以！你只需要在HTML的<head>标签里专门添加iOS书签图标的声明，指定和favicon不同的文件就行。举个简单的例子：

<!-- 自定义iOS书签图标（不带系统默认效果） -->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/apple-touch-icon-precomposed.png">
<!-- 或者带系统默认圆角高光的版本 -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- 你的favicon可以保持原有配置，两者互不影响 -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">

这里要注意，iOS推荐的图标尺寸是180x180px（适配不同分辨率的设备），如果需要覆盖更多设备尺寸，可以添加多个带不同sizes属性的标签，iOS会自动选择最匹配当前设备的图标文件。

另外还有个偷懒的办法：如果把apple-touch-icon.png或者apple-touch-icon-precomposed.png直接放在服务器根目录下，哪怕不在HTML里写声明，iOS也会自动去抓取这个文件，同样能实现和favicon不同的书签图标效果。

内容的提问来源于stack exchange，提问作者Benlov