link rel="icon" href="data:image/x-icon;base64,..." 在 Safari（所有版本）和 IE/Edge Legacy（≤18）中完全失效，Chrome、Firefox、Edge Chromium 虽支持但存在兼容风险；Safari 对 link 的 data: 协议静默忽略，Network 面板无请求，图标不显示，唯一全兼容方案是 href="/favicon.ico"。
可行，但仅限于特定场景，且 Safari 和旧版 Edge 会直接忽略。
link rel="icon" href="data:image/x-icon;base64,..." 在哪些浏览器失效
这个写法在 Safari（所有版本）和 IE/Edge Legacy（≤18）中会被静默跳过，link 标签的 href 属性对 data: 协议的支持远不如 img src 稳定。Chrome、Firefox、Edge Chromium 支持，但 Safari 始终不认——它只接受真实 URL 或空字符串（href="data:," 可作占位，但不加载图标）。
- 实测：Safari DevTools 的 Network 面板完全不触发请求，
document.querySelector("link[rel='icon']")能取到元素，但图标不显示 - 替代方案：
link rel="icon" href="/favicon.ico"是唯一全兼容路径；若必须免请求，可用link rel="mask-icon"（Safari 专用）或 fallback 到 PNG +apple-touch-icon - 注意：
data:image/svg+xml;base64,...对 favicon 无效——Safari 不支持 SVG favicon，且link不解析 base64 SVG 为图标
为什么 background-image: url(data:) 比 link href=data: 更可靠
CSS 的 background-image: url(data:...) 在 Safari 中支持度远高于 link 的 href，因为它是样式引擎处理，而非 HTML 解析器的资源发现阶段。但仍有硬限制：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须写成
url("data:image/png;base64,xxx")，漏引号、多空格、换行都会静默失败 - Base64 字符串里不能有 \n、\r、\t、U+FEFF（BOM），复制时 VS Code 的 word wrap 容易混入隐式换行
- DevTools Network 面板看不到请求，出错只能查 Computed Styles →
background-image值是否为空字符串 - 不支持
onerror回调，也没 fallback 机制，图片挂了就是纯背景色
link href=data: 在非 favicon 场景下的风险
用 link rel="stylesheet" href="data:text/css;base64,..." 或 link rel="preload" href="data:..." 看似能绕过请求，实际问题更隐蔽：
立即学习“前端免费学习笔记（深入）”；
- CSP 默认拦截：
data:不在default-src 'self'范围内，需显式加style-src 'self' data:或font-src 'self' data: - 构建工具（Webpack/Vite）通常不处理
link[href^="data:"]，无法自动注入 hash 或做 MIME 校验，改图后极易缓存不一致 - HTML 解析阻塞：长 Base64 会拖慢 parser，尤其在移动端，首屏渲染延迟比少一个 HTTP 请求更伤体验
- gzip 压缩率暴跌：Base64 字符集熵高，10KB 图片转 Base64 后约 13.3KB，压缩后可能比原图还大
真正卡住性能的，从来不是“有没有请求”，而是 HTML 文件体积失控、解析被阻塞、缓存粒度崩坏。这些点不盯紧，link href="data:..." 就只是把问题从网络层转移到了解析层。
