如何在Google Apps Script中设置网页剪辑图标（apple-touch-icon）

GAS的Web应用会自动过滤<head>内的部分标签，导致直接在<head>中添加apple-touch-icon的link标签无效，动态插入也会被限制。以下是几个可行的解决办法：

方法一：将link标签放在内部 #

浏览器会识别<body>内的link标签，即使不符合HTML规范，也能正常读取apple-touch-icon。将标签放在<body>最顶部即可：

<!DOCTYPE html>
<html>
  <head>
    <!-- 其他合法头部内容 -->
  </head>
  <body>
    <!-- 放在body最上方确保优先识别 -->
    <link rel="apple-touch-icon" sizes="180x180" href="你的图标公开访问链接">
    <!-- 页面主体内容 -->
  </body>
</html>

方法二：嵌入base64编码的图标 #

将图标转为base64编码后直接嵌入，无需依赖外部链接，稳定性更高：

<!-- 示例：180x180的PNG图标base64编码 -->
<link rel="apple-touch-icon" sizes="180x180" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5gMVESkqQzkWSwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAUSURBVBgZBcHPcsAABAAAQ+zWF8wAAAAASUVORK5CYII=">

你可以用在线工具将本地图标转为base64编码，替换上述示例中的编码内容即可。

方法三：通过doGet函数动态添加标签 #

在服务器端的doGet函数中，直接向HtmlOutput对象追加apple-touch-icon的link标签：

function doGet() {
  var htmlOutput = HtmlService.createHtmlOutputFromFile('你的HTML文件名');
  // 添加apple-touch-icon标签
  htmlOutput.append('<link rel="apple-touch-icon" sizes="180x180" href="图标访问链接">');
  // 允许跨域嵌入（根据需求调整）
  return htmlOutput.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

注意事项 #

• 图标尺寸推荐使用180x180（适配大多数iPhone设备），也可添加多个不同尺寸的标签覆盖更多设备。
• 使用外部链接时，需确保资源可公开访问：比如将图标上传至Google Drive，设置为「知道链接的任何人都可以查看」，并使用https://drive.google.com/uc?id=你的文件ID格式的直接访问链接。
• 避免设置过于严格的沙箱模式，默认沙箱配置即可满足需求。

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