如何添加HTML网站图标_Favicon设置全攻略【指南】

需配置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 文件的 区域内插入以下代码：

二、使用 link 标签引入 PNG 或 SVG 格式 favicon

PNG 和 SVG 格式支持更高分辨率与透明度，适合现代浏览器及高 DPI 屏幕显示。

1、准备一张尺寸为 192×192 像素的 PNG 图像，或一个符合规范的 SVG 文件（需无脚本、无外部引用）。

2、将图像文件上传至网站静态资源目录（如 /images/favicon.png）。

3、在 中添加对应 link 标签：

三、为不同设备与上下文提供多规格图标

通过声明多个 link 标签，可覆盖 iOS 主屏幕、Android Chrome 添加到主屏幕、Windows 磁贴等场景。

1、生成包含 16×16、32×32、48×48、64×64、192×192、512×512 像素的 ICO 或 PNG 图标集。

标签： linux html android js json svg windows 浏览器 app 工具 mac ai ios