如何添加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 标签：

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 图标集。

传媒公司模板(RTCMS)1.0

传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目，如果修改栏目，需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML，安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据，安装时可选择演示安装或全新安装。如果全新安装，后台内容充实后，首页才能完全显示出来。（全新安装后可以删除演示数据用到的图片，目录在https://

0

查看详情

2、将各尺寸文件上传至 /images/ 目录下，并确保命名清晰（如 favicon-192.png）。

3、在 中依次添加如下声明：



apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.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、在 中添加链接：

五、验证 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 查看当前域名解析出的图标原始响应。

以上就是如何添加HTML网站图标_Favicon设置全攻略【指南】的详细内容，更多请关注php中文网其它相关文章！