如何设置HTML链接中的favicon图标？

本文共计801个文字，预计阅读时间需要4分钟。

浏览器只认可 rel=

• <link rel="icon" href="/favicon.ico"> ✅ 最简可靠写法
• <link rel="shortcut icon" href="/favicon.ico"> ❌ 现代浏览器忽略
• <link rel="icon" href="favicon.png"> ⚠️ PNG 可用，但需显式声明 type

ICO 还是 PNG？优先用 .ico，多尺寸 PNG 需配 sizes

.ico 文件天然支持多分辨率（16×16、32×32、48×48 等），浏览器自动选最适尺寸；而 .png 必须手动指定 sizes，否则可能在地址栏或书签里显示模糊或拉伸。

• 单文件通用：用 favicon.ico 放在根目录，<link rel="icon" href="/favicon.ico">
• 想用 PNG：必须加 sizes 和 type，例如 <link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">
• 不要只写 <link rel="icon" href="/favicon.png"> —— 浏览器会当成 16×16 渲染，小屏设备上糊成一团

Chrome 不显示 favicon？检查 HTTP 状态码和 MIME 类型

即使 link 写对了，如果服务器返回 404、403 或把 .ico 当作 text/plain 发送，Chrome 直接放弃加载，且控制台不报错 —— 只是静默失败。

• 打开开发者工具 → Network → 刷新页面 → 找到 favicon.ico 请求，看 Status 是否为 200，Type 是否为 image/x-icon（.ico）或 image/png（.png）
• Nginx 示例配置：location = /favicon.ico { alias /var/www/static/favicon.ico; }，避免被后端路由拦截
• 本地开发时用 file:// 协议？Chrome 会直接禁用 favicon 加载 —— 必须起本地服务（如 npx serve）

移动端 PWA 图标要单独处理，link[rel="icon"] 不管用

苹果 Safari 的 apple-touch-icon、Android Chrome 的 manifest.json 图标，都不走 rel="icon"。它们是独立机制，漏掉就导致添加到主屏幕时图标为空白或默认浏览器图标。

立即学习“前端免费学习笔记（深入）”；

• 苹果设备：加 <link rel="apple-touch-icon" href="/icon-180x180.png">，建议 180×180 PNG，无圆角、无透明边距
• PWA：必须提供 manifest.json，并在 HTML 中关联：<link rel="manifest" href="/manifest.json">
• 别指望一个 favicon.ico 全平台通吃 —— iOS、Android、桌面 Chrome 各自解析不同字段，各自缓存策略也不同

实际部署时最容易卡在路径 404 和 MIME 类型错配，尤其是用静态托管（如 GitHub Pages、Vercel）时，.ico 文件常被忽略或误判类型。宁可多加一行 type="image/x-icon"，也别依赖服务器自动推断。