如果你正在制作客户的视觉稿、开发竞品分析面板，或者纯粹想逆向工程一下 Bilibili 是如何处理他们那个精美的暗黑模式标签页图标的，你可能已经碰壁了。你试着在网址后面加上 /favicon.ico，结果只收获了一个 404 错误。现代浏览器早就淘汰了单一根目录文件的做法。如果你想知道现在究竟如何复制一个网站的 favicon（how to copy a website favicon），你必须直接从 DOM 下手。
我在审计客户网站时经常做这件事。在修复他们的图标之前，第一步就是把他们现有的配置完整拷下来。以下是我直接从浏览器中复制网站 favicon 实现方案的具体工作流。
开发者专属：如何复制网站 Favicon
别去“查看网页源代码”。像 Next.js 或 Vue 这样的现代前端框架通常是动态注入这些标签的。我们需要的是渲染后的 DOM。
第一步：打开元素面板
在目标网页上右键点击，选择“检查”（Inspect）。在 Elements 面板中按下 Cmd+F（或 Ctrl+F），直接搜索 rel='icon'。
第二步：复制完整的 HTML 节点
你很可能会找到好几个标签。比如 Vercel 就混合使用了 SVG 和 PNG 作为降级方案。右键点击那个 <link> 节点，选择“复制”（Copy），然后点击“复制元素”（Copy element）。这能让你拿到他们用来加载图标的精确 HTML 代码。
第三步：通过控制台提取资源链接
如果你只想要图片文件本身，去拼凑相对路径（比如 /assets/images/icon.svg）是非常折磨人的。直接切到 DevTools 的 Console 面板，运行这段极简代码：
const icon = document.querySelector('link[rel="icon"]').href;
console.log(icon);这会立刻输出解析后的绝对 URL。点击它，保存图片即可。
复制图标时的常见陷阱
把图标扒下来很简单，但盲目复用通常会出问题。小心以下几个坑：
- 相对路径： 如果你直接把 HTML 标签复制到本地项目中，像
href='/favicon.svg'这样的路径会去你的 localhost 找文件，结果就是标签页一片空白。 - 遗漏苹果图标： 标准的
rel='icon'管不到 iOS 的主屏幕。你通常还得单独去搜刮rel='apple-touch-icon'。 - SVG 媒体查询： 如果你复制了一个 SVG 格式的 favicon，注意它内部可能包含了针对暗黑模式的 CSS。如果你的测试环境不匹配，它可能会隐形。
如果你需要手动处理好几个网站，那太浪费时间了。虽然控制台技巧偶尔用用很爽，但我开发 Mzu favicondl 就是为了自动化这个过程。它能解析目标 URL，处理所有路径，并为你打包好图标。
如果你想深入了解其他提取方法，可以看看我们关于从任意网站下载 favicon的指南，或者了解为什么现代网站都在使用 SVG favicon。别再瞎猜 URL 了，老老实实去审查 DOM 吧。