如何在 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 生成器