Firefox Android本地Web应用快捷方式图标异常问题求助

我之前也碰到过类似的情况，Firefox对本地file://协议的Web应用图标处理确实比Chrome更严格，不过按下面的步骤调整，应该能解决你的问题：

• 完善Web App Manifest配置
  首先确保你的manifest.json文件里的icons字段包含Firefox支持的尺寸和正确路径。Firefox优先识别manifest里的图标，建议覆盖常用尺寸：

  {
    "name": "你的应用名称",
    "short_name": "短名称",
    "icons": [
      {
        "src": "./icons/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
      },
      {
        "src": "./icons/icon-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
      }
    ],
    "start_url": "./index.html",
    "display": "standalone"
  }
  

  路径要和本地文件结构匹配，如果用绝对路径，记得写成file:///sdcard/你的应用目录/icons/icon-192x192.png这种格式（三个斜杠是关键）。

• 在HTML头部添加冗余图标声明
  除了manifest，在index.html的<head>里补充图标链接，帮Firefox更快识别：

  <link rel="icon" type="image/png" sizes="192x192" href="./icons/icon-192x192.png">
  <link rel="apple-touch-icon" sizes="192x192" href="./icons/icon-192x192.png">
  <link rel="manifest" href="./manifest.json">
  

  虽然apple-touch-icon是针对iOS的，但Firefox for Android也会读取这个配置作为备选。

• 重新创建桌面快捷方式（先清旧的）
  先删掉已经存在的无效快捷方式，然后打开Firefox访问你的本地应用，点击右上角三点菜单 → 添加到主屏幕：

  • 如果弹出对话框里的预览图标还是默认绿底白S，说明图标路径有问题，回到前两步检查路径是否正确；
  • 如果预览图标正常，点击确认添加，新的快捷方式就会显示正确图标了。

• 清除Firefox缓存
  有时候Firefox会缓存旧的图标资源，即使你更新了文件也不生效。进入Firefox设置 → 隐私和安全 → 清除私人数据，只勾选缓存选项，清除后重启Firefox，再重新添加快捷方式试试。

• 更新Firefox到最新版本
  旧版本的Firefox for Android对Web App Manifest的支持可能有bug，建议在应用商店把Firefox更到最新稳定版，很多旧版本的图标识别问题在新版本里已经修复了。

至于Chrome能正常显示的原因：Chrome对本地file://协议的Web应用兼容性更好，图标识别逻辑更宽松；而Firefox为了遵循Web标准，对本地资源的路径和manifest配置要求更严格，所以需要我们把配置做的更规范。

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