如何在 HTML 中添加网站图标
三个标签覆盖99%的情况。另外两个可为您提供完整的 PWA 级设置。
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
最小标签
<link rel="icon" href="/favicon.ico"> — 就是这样。每个浏览器都会获取它。
现代推荐套装
添加 SVG 和 apple-touch-icon 以在每个平台上进行清晰渲染：
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" 尺寸="180x180" href="/apple-touch-icon.png">
PWA 安装提示
添加包含 192×192 和 512×512 PNG 条目的 manifest.json，然后链接 <link rel="manifest" href="/site.webmanifest">。
常见问题
What is the minimum HTML tag for a favicon?
Add <link rel="icon" href="/favicon.ico"> inside <head>. Place favicon.ico at your site root and every browser will find it.
Do I need separate tags for PNG and SVG favicons?
Yes for a modern setup. Link favicon.ico as the fallback, then add <link rel="icon" type="image/png"> and optionally type="image/svg+xml" for sharper rendering.
Where should favicon <link> tags go in HTML?
Inside the <head> element, before </head>. Order among icon links does not matter.
Do I need a web manifest for favicons?
Not for basic tabs, but add <link rel="manifest"> plus 192×192 and 512×512 PNG icons if you want PWA install prompts.