域内Google Apps Script添加Favicon失败：求2023年有效解决方案

问题概述 #

域内Google Apps Script中无法正常显示自定义图标，按官方文档要求使用HtmlService.setFaviconUrl()方法时，不知道如何正确调用域内公共Drive文件夹里的文件URL。

尝试过程及问题点 #

• 直接使用Drive文件默认URL：https://drive.google.com/file/d/[googleId]/view?usp=drive_link，触发文件类型错误
• 添加&type=.png后错误提示消失，但页面仍显示Google Apps Script默认图标
• 浏览器控制台发现根本原因：

  Cross-Origin Read Blocking (CORB) blocked cross-origin response https://drive.google.com/file/d/[Google ID]/view?usp=drive_link&type=.png with MIME type text/html.

• 尝试直接嵌入原始SVG代码，完全无效

需求 #

寻找2023年可靠的原生实现方案，不排斥免费/低价托管，但坚决不使用未经授权的第三方资源；已知可将应用嵌入空白Google站点，但希望保持原生Web App的设计形式。

可行解决方案 #

方案1：使用Drive文件的直接访问链接（推荐） #

Drive的默认共享链接是网页视图（MIME类型为text/html），浏览器无法将其识别为图标资源，需要构造直接返回图片内容的链接：

1. 将Drive中的图标文件设置为「域内可访问」或「公开可见」
2. 提取文件ID（即URL中d/与/view之间的[googleId]）
3. 构造对应格式的直接链接：
   • PNG图标：https://drive.google.com/uc?export=view&id=[你的文件ID]
   • ICO图标：https://drive.google.com/uc?export=view&id=[你的文件ID]
4. 在脚本中调用：

   function doGet() {
     const html = HtmlService.createHtmlOutput('<h1>测试页面</h1>');
     return html.setFaviconUrl('https://drive.google.com/uc?export=view&id=[你的文件ID]');
   }
   

   该链接返回纯图片资源，不会触发CORB拦截。

方案2：利用Google Sites托管图标 #

若域内Drive链接仍存在跨域问题，可借助Google Sites托管图标文件：

1. 创建空白Google站点，将图标上传至站点附件
2. 右键图标选择「获取链接」，设置为域内可访问或公开
3. 将该链接传入setFaviconUrl方法，Google Sites的资源链接天然兼容跨域要求

方案3：第三方免费静态资源托管（可选） #

使用支持CORS的免费托管服务（如GitHub Pages、Vercel）：

1. 将图标文件上传至对应服务，获取直接访问URL
2. 在Apps Script中使用该URL，确保服务返回正确的图片MIME类型

注意事项 #

• 图标文件需使用浏览器支持的格式：ICO、PNG（推荐16x16/32x32像素）、SVG
• 所有外部资源链接必须允许跨域访问，且响应的MIME类型为图片类

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