如何为部署为Web App的Google Apps Script添加自定义主屏图标？

我之前也遇到过这个问题！Google Apps Script部署的Web App确实不能直接在它自动生成的manifest里加icons字段——因为那个manifest是Google托管控制的，不支持自定义这个字段。不过有两个可靠的办法来添加自定义图标，还能用到Google Drive里的图片：

方法1：直接在HTML中添加Meta标签（最简单） #

Chrome（包括安卓版）在将网站添加到主屏时，会优先读取页面中的特定meta标签，不需要完整的manifest文件。你只需要在Web App的HTML模板里添加以下标签：

<!-- 自定义主屏图标（安卓Chrome会识别apple-touch-icon标签） -->
<link rel="apple-touch-icon" sizes="192x192" href="你的图标公开URL">
<!-- 设置App显示名称 -->
<meta name="application-name" content="你的Web App名称">
<!-- 设置状态栏主题色 -->
<meta name="theme-color" content="#你的主题色代码">

关于图标的URL： #

• 可以用Google Drive中的图片：把图标图片上传到Drive后，右键点击图片→「共享」→设置为「任何人可查看」。然后复制链接，把链接中的open?id=XXX替换成uc?export=view&id=XXX，这样就能得到直接访问图片的URL，比如：
  原链接：https://drive.google.com/file/d/XXX/view?usp=sharing
  修改后：https://drive.google.com/uc?export=view&id=XXX
• 不建议用Google表格中的图片：表格里的图片链接是临时的，会过期且无法公开直接访问，最好先把表格里的图标下载到本地，再上传到Drive获取稳定的公开链接。

方法2：自行托管Manifest文件 #

如果你更倾向于使用标准的Web App Manifest，可以自己创建一个manifest.json文件，然后托管到公开可访问的位置（比如Google Drive），再在Web App的HTML中引入它：

1. 创建manifest.json文件，内容示例：

{
  "name": "你的Web App全名",
  "short_name": "短名称",
  "icons": [
    {
      "src": "你的图标公开URL",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "你的512x512图标URL",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#你的主题色代码",
  "display": "standalone"
}

2. 把这个manifest.json上传到Drive，设置为「任何人可查看」，同样修改链接为直接访问格式（把open?id=XXX换成uc?export=view&id=XXX）。

3. 在Web App的HTML中添加引入标签：

<link rel="manifest" href="你的manifest.json的公开URL">

注意事项 #

• 图标建议使用192x192px或512x512px的PNG格式，避免拉伸变形。
• 修改完HTML后，一定要重新部署Web App（选择「新版本」），然后在安卓Chrome中刷新Web App页面，再重新添加到主屏，新图标才会生效。
• 如果添加后还是显示默认图标，可以尝试清除Chrome的缓存，或者先移除主屏上的旧图标再重新添加。

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