Android/Chrome环境下PWA启动屏显示极小图标问题求助

我之前也踩过这个坑，Chrome总在启动屏显示极小的图标，折腾了好久才摸清楚关键解决点，你可以逐一排查：

• 严格按Chrome要求配置manifest图标
  首先得确保manifest.json里包含多尺寸图标，尤其是192px和512px这两个核心尺寸，并且给大图标加上purpose: "any maskable"属性——这是Android自适应图标的关键，没有它Chrome可能会默认缩放小图标，导致显示异常。示例配置如下：

  "icons": [
    {
      "src": "icon-48x48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
  

• 配置专门的启动屏（Splash Screen）字段
  现在Chrome支持在manifest里直接定义启动屏的图标和样式，你可以单独指定一个大尺寸启动屏图标（推荐512px），避免系统自动缩放小图标。示例配置：

  "splash_screen": {
    "background_color": "#你的背景色",
    "image": "/splash-icon-512x512.png",
    "image_type": "image/png",
    "brand_color": "#你的品牌色"
  }
  

  同时别忘了设置display: "standalone"或者"fullscreen"，如果是browser模式，启动屏会沿用浏览器样式，不会加载你的自定义图标。

• 确保图标符合Maskable规范
  Maskable图标需要在边缘留出安全区域（一般是图标尺寸的20%），不能把重要内容放在太靠近边缘的地方——Android会把图标裁剪成圆形或圆角矩形，不符合规范的图标会被强制缩小显示。你可以用专门的maskable图标校验工具检查图标是否达标。

• 清除缓存并重新安装PWA
  旧缓存是常见的坑！先卸载手机上已安装的PWA，然后在Chrome里清除该站点的所有数据（设置→站点设置→找到你的网站→清除数据），之后重新添加到主屏幕，确保Chrome加载最新的manifest和图标。

• 用Chrome DevTools排查问题
  打开Chrome桌面版的DevTools，切换到Application面板的Manifest选项：

  • 检查所有图标是否正确加载，有没有红色警告
  • 查看启动屏预览，确认图标显示是否正常
  • 如果有配置错误，DevTools会直接给出提示，比如缺少某个尺寸的图标或者purpose属性不正确

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