如何为Android与iOS网页应用指定不同主屏图标

嘿，这个问题问得很实用！要让Android和iOS各自加载专属的主屏图标，咱们可以通过针对不同平台的标签配置来实现，下面分平台给你讲得明明白白：

iOS 专属图标配置 #

iOS设备会优先识别以apple-touch-icon或apple-touch-icon-precomposed开头的<link>标签，完全不会混淆Android的配置。你可以根据不同iOS设备的屏幕尺寸，指定对应大小的图标：

<!-- iOS 主屏图标 - 适配iPhone Retina（包括iPhone 6+及以后机型） -->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/ios-icon-180x180.png">
<!-- iOS 主屏图标 - 适配iPad Pro -->
<link rel="apple-touch-icon-precomposed" sizes="167x167" href="/ios-icon-167x167.png">
<!-- iOS 主屏图标 - 适配普通iPad -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/ios-icon-152x152.png">

提示：precomposed后缀表示图标已经包含圆角和光泽效果，如果不带这个后缀，iOS会自动给图标添加圆角和光泽。

Android 专属图标配置 #

Android推荐使用Web App Manifest（现代Web App的标准配置，Android 7.0+支持最佳），通过单独的配置文件来指定专属图标，完全不会被iOS识别：

1. 首先创建一个manifest.json文件，内容如下：

{
  "name": "你的应用全称",
  "short_name": "应用短名",
  "start_url": "/",
  "display": "standalone", // 让应用以独立App模式运行
  "icons": [
    {
      "src": "/android-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

2. 在HTML文件中引入这个manifest：

<link rel="manifest" href="/manifest.json">

如果需要兼容旧版Android（6.0及以下），还可以添加专门的<link>标签：

<!-- 旧版Android 主屏图标 -->
<link rel="icon" sizes="192x192" href="/android-icon-192x192.png">

总结 #

iOS只会抓取apple-touch-icon系列标签的图标，Android则优先读取Web App Manifest里的配置，两者完全独立，这样就轻松实现了两个平台使用不同主屏图标的需求啦！

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