必须手动在中声明标签，最通用写法是，路径须为绝对路径，type属性增强旧浏览器兼容性；支持PNG、SVG等现代格式时需注意浏览器兼容差异及多尺寸适配。
在 index.html 中添加
浏览器默认不会自动加载 favicon，必须手动在 里声明。最通用写法是：
<link rel="icon" href="/favicon.ico" type="image/x-icon">
注意路径以 / 开头表示根目录，避免相对路径出错；type 属性虽非必需，但显式声明能减少旧版浏览器兼容问题。
支持现代格式（如 .png、.svg）时的写法差异
.ico 兼容性最好，但不支持透明渐变和高倍屏缩放；用 .png 或 .svg 需额外处理：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
—— 简单替换，但 Safari 15 之前不支持.svg作为 favicon - 若同时提供多尺寸，可加
sizes属性： - Chrome / Edge 支持
，但 Firefox 目前仅支持部分 SVG 特性（不能含 script 或外部引用）
常见错误：图标不显示的几个硬坑
不是代码写错，而是部署或缓存导致的“假失败”：
- 浏览器强缓存
favicon.ico：即使你替换了文件，旧图标仍可能显示；强制刷新无效，需清空浏览器 favicon 缓存（Chrome 地址栏输入chrome://settings/clearBrowserData→ 勾选“图像和文件缓存”） - 服务器未正确返回
200：访问https://yoursite.com/favicon.ico直接返回404或403，说明路径不对或服务器配置拦截了该路径 - 图标尺寸不符合规范：.ico 文件应至少包含
16x16和32x32两个尺寸；.png 推荐用32x32或64x64，否则在桌面 PWA 或书签中可能模糊 - 没有放在网站根目录：很多工具（如某些 CMS、CDN）只认
/favicon.ico，即使你在 HTML 里写了其他路径，它们也可能忽略
验证是否生效的最快方式
别等部署完再检查：
- 本地测试时，确保用
http://localhost:xxxx/打开，而不是双击打开file://协议 —— 后者多数浏览器禁用 favicon 加载 - 打开浏览器开发者工具 → Network 标签页 → 刷新页面 → 搜索
favicon，看是否发起请求且返回200 - 右键标签页 → “将此页面添加到书签”，观察书签图标是否更新；这是比地址栏更敏感的验证场景
实际项目里最容易被绕过的点是服务器对 /favicon.ico 的隐式拦截，尤其是用了 Nginx 或 Cloudflare 的时候——它们常默认屏蔽该路径或返回空响应，得单独配一条 location = /favicon.ico { try_files $uri =200; } 规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
