如何为iOS与MacOS Chrome网页应用分别配置不同的apple-touch-icon

结论 #

可以通过HTML为iOS和MacOS分别指定不同的apple-touch-icon图标，也可以通过多尺寸声明的方式让系统自动匹配适配，以下是具体实现方案和问题说明：

实现分别适配的两种方案 #

• 方案1：前端media属性匹配（无后端依赖）
  给link标签添加media查询，针对不同设备环境加载对应图标，示例代码如下：

<!-- iOS端专用图标：180x180 -->
<link rel="apple-touch-icon" type="image/png" sizes="180x180" media="screen and (max-device-width: 1024px)" href="apple-touch-icon-ios.png">
<!-- MacOS端专用图标：要求1024x1024，PNG格式、无alpha通道、纯色不透明背景 -->
<link rel="apple-touch-icon" type="image/png" sizes="1024x1024" media="screen and (min-device-width: 1025px)" href="apple-touch-icon-mac.png">

该方案前端即可完成开发，兼容性覆盖99%以上的使用场景。

• 方案2：后端UA判断输出（精准度更高）
  如果需要完全精准的设备区分，可在后端解析请求的User-Agent字段，识别请求来源为iOS还是MacOS设备，返回对应尺寸的apple-touch-icon声明代码即可。

当前MacOS显示异常的原因 #

你当前仅声明了180x180尺寸的图标，MacOS将Web APP添加到Dock、启动台时，需要更大尺寸的图标资源，系统会强制放大180x180的图标导致显示模糊、边缘失真，属于预期内的表现。

如果不想单独制作两套图标，也可以直接声明多尺寸图标，系统会自动匹配对应尺寸取用，兼容性更强：

<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="apple-touch-icon-180.png">
<link rel="apple-touch-icon" type="image/png" sizes="1024x1024" href="apple-touch-icon-1024.png">

该写法下iOS会自动选用180x180的图标，MacOS会自动选用1024x1024的图标，无需额外做设备判断。

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