如何在 HTML 添加 Favicon

添加 favicon 只需在 HTML <head> 里加几个 link 标签。下面是覆盖所有浏览器、iOS、Android 和 PWA 的完整集合。

把图标文件放站点根目录,然后在每个页面的 <head> 加这些标签:ICO/PNG 的 <link rel="icon">、iOS 的 <link rel="apple-touch-icon">、Android/PWA 的 <link rel="manifest">。

完整的 favicon HTML

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

常见问题

favicon HTML 放在哪里?+

每个 HTML 页面的 <head> 里,</head> 之前。加上你需要的所有 <link> 标签(icon、apple-touch-icon、manifest)。

ICO 和 PNG link 标签都要吗?+

建议都要。favicon.ico 是通用兜底;PNG link 标签给现代浏览器尺寸化的清晰图标。两者共存不冲突。

为什么我的 favicon HTML 不生效?+

检查文件路径正确且文件存在,清浏览器缓存(硬刷新),并确保标签在 <head> 里而不是 <body>。

生成文件 + HTML

上传图片下载完整 favicon 包——生成器内含你需要的精确 HTML。

打开 Favicon 生成器