favicon 文件应统一放在 /assets/icons/ 下，按用途命名：favicon.ico（兼容旧浏览器）、favicon.svg（主力矢量图标）、apple-touch-icon.png（180×180）、manifest-icon-192.png 和 manifest-icon-512.png（PWA 所需），避免尺寸混杂、路径分散导致 404 或加载失效。
favicon 文件怎么组织才不混乱
favicon 不是丢一个 favicon.ico 就完事。现代浏览器会按需请求多种尺寸和格式，如果路径杂乱、命名随意，很快就会出现 404、重复加载、深色模式失效等问题。
推荐结构如下（全部放在 /assets/icons/ 下）：
-
favicon.ico—— 必须存在，兼容 IE 和旧版 Safari -
favicon.svg—— 主力图标，矢量清晰、体积小、自动适配深色/浅色模式 -
apple-touch-icon.png—— 180×180px，iOS 添加到主屏幕用 -
manifest-icon-192.png和manifest-icon-512.png—— PWA 清单所需
别把不同尺寸的 PNG 命名为 icon-32.png、icon-16.png 然后散落在各处——浏览器不会猜你哪一个是哪个，rel 属性才是唯一依据。
HTML 中
单靠一行 会丢失高分屏、iOS、PWA 等关键场景支持。必须组合声明，且顺序有讲究：SVG 优先，.ico 放最后兜底。
标准写法（放在 内）：
<link rel="icon" href="/assets/icons/favicon.svg" type="image/svg+xml"><link rel="icon" href="/assets/icons/favicon.ico" sizes="any" type="image/x-icon"><link rel="apple-touch-icon" href="/assets/icons/apple-touch-icon.png"><link rel="manifest" href="/assets/icons/site.webmanifest">
注意：sizes="any" 是给 .ico 的必需参数；type="image/svg+xml" 不能省，否则 Chrome 99+ 会忽略 SVG；site.webmanifest 必须包含 icons 数组，否则 PWA 安装失败。
品牌 Logo 图片资源怎么和 HTML 结构解耦
首页
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
更可持续的做法是分层管理：
- 源文件统一放
/src/logos/（含 SVG 源、AI 源、透明背景 PNG） - 构建时生成多套交付物：
/dist/logos/brand-header.svg（带 viewBox 优化）、/dist/logos/partner-github.svg（裁白边+缩放）、/dist/logos/footer-monochrome.svg（灰度版） - HTML 中通过语义化 class 或 data 属性区分用途，例如：
这样换主品牌色时，只需重跑构建脚本，所有上下文自动更新；加深色模式适配，也只需在构建逻辑里插入 CSS filter 转换步骤，不用改任何 HTML。
动态切换品牌主题时，图标资源怎么避免硬编码
当网站支持多品牌（如 brand-a / brand-b）时，很多人直接在 JS 里拼接路径："/logos/" + brand + ".svg"。这会导致缓存失效、CDN 不识别、无法预加载、构建期无法校验路径是否存在。
正确方式是用 CSS 自定义属性驱动，让资源路径成为样式的一部分：
:root {
--logo-header: url(/dist/logos/brand-default.svg);
}
.brand-a {
--logo-header: url(/dist/logos/brand-a.svg);
}
.brand-b {
--logo-header: url(/dist/logos/brand-b.svg);
}
.logo-header {
background-image: var(--logo-header);
}
然后 HTML 保持静态：。JS 只负责切 document.documentElement.className，不碰路径字符串。这样所有图标都能被 CSS 打包工具识别、压缩、预加载，也方便做 SVG 内联优化。
真正容易被忽略的是 SVG 图标内部的可访问性：如果用了 引用 symbol，必须确保 aria-hidden="true"，而容器元素用 aria-label 描述用途——否则屏幕阅读器会读两遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
