Windows端PWA安装自定义图标不显示 安卓端正常问题咨询

问题根因 #

安卓端PWA图标适配逻辑宽松，只要资源可加载即可正常展示，但Windows平台Chromium内核浏览器（Chrome/Edge/Opera）、Firefox对PWA图标有额外校验规则，不符合规则的图标会被直接丢弃，回退到取站点名称首字母生成默认黑底图标，该问题和缓存、event.prompt()调用时机没有关联。

逐项修复操作 #

• 补全符合尺寸要求的图标文件：Windows端强制要求manifest中声明至少1个尺寸≥256x256像素的正方形PNG图标，仅提供192x192及以下尺寸的图标会直接触发默认图标回退。建议同时准备256x256、512x512两个尺寸的姜饼屋PNG文件，不要用改后缀的JPG/WebP文件，可通过系统自带画图工具重新导出避免文件头损坏。
• 修正manifest图标配置：不要给桌面端使用的图标单独设置purpose: "maskable"属性，Windows端浏览器不会识别仅标记为maskable的图标作为安装弹窗、桌面快捷方式的展示资源，对应图标条目需要设置purpose: "any"，或直接不填purpose字段保留默认值。参考配置如下：

{
  "icons": [
    {
      "src": "gingerbreadhouse-256.png",
      "sizes": "256x256",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "gingerbreadhouse-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}

• 彻底清理旧应用残留：仅清除浏览器缓存无法重置已经写入系统的PWA图标缓存，需要先卸载已经安装的应用，再进入浏览器内部应用管理页面（Chrome访问chrome://apps、Edge访问edge://apps）删除对应应用的残留条目，重启浏览器后再触发安装流程。
• 校验资源响应头：安装弹窗拉取图标时，确保服务端返回的Content-Type为标准image/png，不要返回text/plain、application/octet-stream等错误MIME类型，这类响应会被浏览器判定为无效图标资源。

附加问题说明 #

"已添加到主屏幕"是Chromium内核全平台统一的固定提示文案，Windows端实际将应用写入开始菜单应用文件夹是系统层适配逻辑，目前该文案没有开放给开发者自定义的入口。

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