移动端保存应用URL至欢迎屏幕时能否显示资源中的Favicon？

我之前也帮开发者解决过类似的问题，移动端Chrome把应用保存到主屏时显示Google的"G"图标，大多是因为图标尺寸不匹配、Web App Manifest配置有误或者缓存残留导致的。结合你用Google App Maker的场景，给你几个具体的解决步骤：

• 确保图标尺寸符合移动端要求
  移动端（不管是Android还是iOS的Chrome）对主屏图标有严格的尺寸要求，单一尺寸的图标很容易适配失败。建议你准备这几个尺寸的透明背景PNG图标：192x192px（适配Android）、512x512px（用于安装和高分辨率屏幕）、180x180px（适配iOS）。ICO格式在移动端支持不稳定，优先用PNG。

• 正确配置Google App Maker的Web App Manifest
  这是最关键的一步，App Maker的manifest配置决定了移动端识别图标的逻辑：

  1. 打开你的App Maker项目，切换到Settings（设置）标签，找到Web App Manifest板块。
  2. 点击图标字段旁的选择按钮，从Resources里选中你上传的对应尺寸的PNG图标。
  3. 确保manifest的icons数组包含多尺寸条目，示例配置如下：

     "icons": [
       {
         "src": "your-icon-192x192.png",
         "sizes": "192x192",
         "type": "image/png"
       },
       {
         "src": "your-icon-512x512.png",
         "sizes": "512x512",
         "type": "image/png"
       },
       {
         "src": "your-icon-180x180.png",
         "sizes": "180x180",
         "type": "image/png"
       }
     ]
     

  4. 别忘了填写name和short_name字段，这会影响主屏上显示的应用名称。

• 清除缓存并重新创建主屏快捷方式
  有时候旧的缓存图标会被系统复用，导致新图标不生效：

  1. 先删除手机主屏上已有的该应用快捷方式。
  2. 打开移动端Chrome的设置，清除浏览数据（勾选“缓存的图片和文件”以及“站点数据”）。
  3. 重新打开你的App Maker应用，再尝试保存到主屏。

• 验证Manifest是否生效
  你可以在桌面版Chrome里先确认配置是否正确：

  1. 打开应用后按F12打开开发者工具，切换到Application标签。
  2. 查看左侧的Manifest选项，检查图标路径、尺寸是否正确，有没有红色的加载错误提示。如果有问题，根据提示修正配置。

• 确认部署的是最新版本
  修改完图标和manifest后，一定要重新部署你的App Maker应用，选择“Deploy as web app”，更新版本号，确保用户访问的是包含新配置的版本。

另外提醒一句：不要给图标加圆角，移动端系统会自动为主屏图标添加圆角和阴影效果，你只需要提供方形的透明图标就好。

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