最省事方案是将 favicon.ico 放根目录，但需 ico 格式且含 16×16/32×32 尺寸；现代浏览器推荐用 显式声明，配合 sizes、type、绝对路径及多尺寸支持；ios 需额外添加 apple-touch-icon.png；缓存、路径、格式是三大常见问题。

favicon.ico 放在根目录是最省事的方案

浏览器会自动请求 /favicon.ico，只要把图标文件命名为这个、放在网站根目录（即和 index.html 同级），多数情况就能显示。不需要写任何 HTML 标签，适合静态托管或简单站点。

注意点：

• favicon.ico 必须是 ICO 格式，不是 PNG 或 JPG —— 即使改后缀也不行
• 尺寸建议包含 16×16 和 32×32 两个大小（可用在线工具生成多尺寸 ICO）
• 部分现代浏览器（如 Chrome 90+）对根目录自动请求的支持变弱，尤其用本地 file:// 打开时可能不加载

用 显式声明更可靠

在 index.html 的 里加一行，能覆盖所有场景，包括本地打开、子路径访问、PWA 等。

推荐写法：

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

关键细节：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• sizes 属性必须写（即使只有一种尺寸），否则某些浏览器（如 Safari）可能忽略
• type 要匹配实际文件类型：image/png 对应 PNG，image/x-icon 对应 ICO
• href 推荐用绝对路径（以 / 开头），避免路由嵌套时路径失效
• 可以同时放多个 <link>，让浏览器按需选择，例如再加一行 sizes="16x16" 的

Apple 设备需要额外声明 apple-touch-icon

iOS Safari 不认标准 rel="icon"，会找 apple-touch-icon.png。不加的话，用户添加到主屏幕时显示的是网页截图，很糊。

做法很简单：

• 准备一张 180×180 的 PNG 图标（无圆角、无阴影，苹果会自动加）
• 放在根目录，命名为 apple-touch-icon.png
• 或者在 里显式声明：

  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

注意：iOS 会缓存这个图标很久，换图后可能要清 Safari 缓存或重启设备才生效。

遇到图标不更新？优先检查缓存和路径

最常踩的坑不是代码写错，而是浏览器死命缓存旧图标，尤其 favicon.ico。

• 强制刷新无效时，试试在地址栏输入 https://yoursite.com/favicon.ico 直接访问，看是否返回 404 或旧图
• 用开发者工具 Network 面板过滤 favicon，确认请求的 URL 和状态码（304 表示缓存命中）
• 本地测试用 file:// 协议时，Chrome 完全不加载 favicon，必须起一个本地服务（如 npx serve）
• 部署后图标没变，可能是 CDN 缓存了旧文件，需要手动 purge 或加版本号：href="/favicon.png?v=2"

真正麻烦的从来不是加一行标签，而是图标被缓存、路径拼错、格式不匹配这三件事反复叠加。每次改完，务必用隐身窗口 + 强制刷新验证。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！