项目刚上线，你兴冲冲地打开新标签页，结果浏览器标签上赫然是一个默认的地球图标——你的品牌 logo 没显示出来。打开 DevTools 的 Console，赫然看到一条 favicon 相关的报错警告。十有八九，是你的 HTML <link> 标签写挂了。
最快的修复办法就是检查并纠正你的 HTML 属性。浏览器对 icon 的声明要求非常严格。引号没闭合，或者标签没正确结束，解析器会直接把这个元素忽略掉。下面是一套绝对不会出错的模板，直接抄就行：
<link rel='icon' href='/favicon.svg' type='image/svg+xml' />
<link rel='apple-touch-icon' href='/apple-touch-icon.png' />注意这里的自闭合斜杠和显式的 type 属性。type 声明能明确告诉浏览器文件的具体格式，避免解析时的歧义。（如果你需要更完整的标签属性说明，可以看我们整理的 Favicon HTML Code Cheat Sheet。）
浏览器为什么会抛出 Syntax Error
HTML 解析器虽然容错率很高，但也有底线。当它遇到格式错误的代码时，会尝试自动修复。但有时候它猜错了，就会直接跳过你的 icon 标签。
引号缺失或中英文混淆
如果你是从某些技术博客或者掘金评论区复制的代码，很可能会带入全角引号，或者干脆漏掉了闭合引号：
<!-- BROKEN: missing closing quote on href -->
<link rel='icon' href='/favicon.ico />解析器读到这行代码，会以为后面的 HTML 内容都是 href 的 URL 的一部分。结果就是你的 favicon 消失了，而且浏览器把后续的标签也吃掉了，导致页面布局出现连锁崩溃。
shortcut icon 这个 Rel 属性的坑
一些老教程会教你写 rel='shortcut icon'。这早就过时了。现代浏览器只需要 rel='icon' 就够了。'shortcut' 这个词是当年 Internet Explorer 留下的历史包袱，逼着开发者必须写成带空格的 rel='shortcut icon'。但在 rel 属性里加空格会产生多个 token 值，一些严格的 HTML5 校验器会直接把这判定为 syntax error。听我的，老老实实用 rel='icon' 就行。
真实案例：看看 GitHub 是怎么做的
扒一下 GitHub 的源码就知道了。他们只用了一个 SVG favicon，并且在这个 SVG 里内置了暗黑模式的 media query。他们的 HTML 非常干净：
<link rel='icon' class='js-site-favicon' type='image/svg+xml' href='https://github.githubassets.com/favicons/favicon.svg' />没有语法错误，也没有 shortcut 这种历史遗留关键词。他们显式声明了 MIME type，让浏览器不用去猜。（关于这种方案的尺寸适配策略，我们在 Favicon Best Size 2026 guide 里有详细解析。）
如何预防这类 Syntax Error
语法错误往往是因为我们手写 link 标签导致的。这里有几个彻底杜绝这个问题的方法：
- 用 Lint 工具： 像 HTMLHint 这类工具能在代码提交前就揪出未闭合的标签和引号错误。
- 别手写了： 用生成器来产出标签。Mzu favicondl 每次都能输出经过校验的、干净的 HTML link 标签。
- 校验你的 manifest： 如果你用了
site.webmanifest，JSON 里多出一个 trailing comma 就能让你的图标全部失效。记得过一遍 JSON validator。
把标签改对，跑一遍校验工具，你的浏览器标签页就能在各个平台上都正常显示图标了。告别默认的地球图标。