iOS端PWA添加到主屏幕提示图标尺寸设置及白边问题咨询

解决iOS PWA添加主屏幕弹窗图标白边方案 #

1. 调整apple-touch-icon配置

删除现有的192x192尺寸的apple-touch-icon声明，新增带预处理属性的配置，关闭iOS自动给图标添加光晕、圆角、白边的默认逻辑：

<link rel="apple-touch-icon-precomposed" sizes="180x180" href="assets/icons/apple-touch-icon-180x180.png">

注意你使用的180x180图标不要留透明背景，透明区域会被iOS自动填充为白色，直接将图标背景设置为你需要的实色即可，有效内容控制在152x152的中心区域避免被裁切。

2. 补充manifest图标适配属性

在你引入的site.webmanifest文件中，给对应尺寸的图标添加purpose属性，标记为可适配全出血显示：

{
  "icons": [
    {
      "src": "assets/icons/apple-touch-icon-180x180.png",
      "sizes": "180x180",
      "type": "image/png",
      "purpose": "any maskable"
    },
    // 其余原有尺寸图标配置保留即可
  ]
}

修改后清除Safari缓存重新测试即可实现类似Twitter PWA的无白边图标效果。

效果对比参考：

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