需配置Favicon以在浏览器标签页等处显示专属图标，方法包括：一、用link标签声明favicon.ico；二、引入PNG/SVG格式图标；三、提供多规格图标适配不同设备；四、通过manifest.json管理PWA图标；五、验证生效并清除缓存。
如果您希望网站在浏览器标签页、书签栏或桌面快捷方式中显示专属图标，则需要正确配置 Favicon。以下是实现此效果的多种方法：
一、使用 link 标签在 HTML 中声明 favicon.ico
该方法适用于传统标准格式，浏览器普遍兼容，优先读取根目录下的 favicon.ico 文件。
1、准备一个尺寸为 16×16 像素或 32×32 像素的 .ico 格式图像文件，命名为 favicon.ico。
2、将 favicon.ico 文件上传至网站根目录（即与 index.html 同级的路径）。
立即学习“前端免费学习笔记（深入）”；
3、在 HTML 文件的 <head> 区域内插入以下代码：
<link rel="icon" href="/favicon.ico" type="image/x-icon">
二、使用 link 标签引入 PNG 或 SVG 格式 favicon
PNG 和 SVG 格式支持更高分辨率与透明度，适合现代浏览器及高 DPI 屏幕显示。
1、准备一张尺寸为 192×192 像素的 PNG 图像，或一个符合规范的 SVG 文件（需无脚本、无外部引用）。
2、将图像文件上传至网站静态资源目录（如 /images/favicon.png）。
3、在 <head> 中添加对应 link 标签：
<link rel="icon" type="image/png" href="/images/favicon.png" sizes="192x192">
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg">
三、为不同设备与上下文提供多规格图标
通过声明多个 link 标签，可覆盖 iOS 主屏幕、Android Chrome 添加到主屏幕、Windows 磁贴等场景。
1、生成包含 16×16、32×32、48×48、64×64、192×192、512×512 像素的 ICO 或 PNG 图标集。
2、将各尺寸文件上传至 /images/ 目录下，并确保命名清晰（如 favicon-192.png）。
3、在 <head> 中依次添加如下声明：
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32.png">
<link rel="icon" type="image/png" sizes="192x192" href="/images/favicon-192.png">
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
<meta name="msapplication-TileImage" content="/images/mstile-144.png">
四、使用 manifest.json 统一管理 PWA 图标配置
适用于渐进式 Web 应用（PWA），通过清单文件集中定义图标尺寸、名称与用途。
1、创建名为 manifest.json 的文件，保存于网站根目录。
2、在 manifest.json 中写入 icons 数组，例如：
{
"icons": [
{"src": "/images/icon-72x72.png", "sizes": "72x72", "type": "image/png"},
{"src": "/images/icon-192x192.png", "sizes": "192x192", "type": "image/png"},
{"src": "/images/icon-512x512.png", "sizes": "512x512", "type": "image/png"}
]
}
3、在 <head> 中添加链接：
<link rel="manifest" href="/manifest.json">
五、验证 favicon 是否生效
浏览器缓存可能导致新图标延迟显示，需主动触发刷新机制以确认实际加载效果。
1、在 Chrome 浏览器中打开开发者工具（F12），切换至 Network 标签页。
2、刷新页面后，在过滤栏输入 favicon，检查是否返回 200 状态码及正确的 Content-Type。
3、清除浏览器缓存：按 Ctrl+Shift+R（Windows/Linux）或 Cmd+Shift+R（macOS）执行硬性重载。
4、访问 chrome://favicon/https://yourdomain.com 查看当前域名解析出的图标原始响应。
