如何在HTML中为网站添加浏览器标题栏显示的图标
2026-5-20
如何在纯HTML网站中添加网站图标（Favicon）
想要给纯HTML网站的浏览器标题栏加图标？这事儿其实挺简单的，有几种不同的方案，适配不同场景和设备，我给你一步步讲清楚：
基础兼容方案：用favicon.ico
这是最经典、兼容性拉满的方法，几乎所有浏览器（包括老版本）都支持：
- 先准备一个ICO格式的图标，尺寸建议16x16或者32x32像素（ICO格式可以包含多个尺寸，浏览器会自动选合适的），命名成
favicon.ico - 把这个文件放到你的网站根目录——也就是和你的
index.html同一层级的文件夹里 - 在HTML的
<head>标签里加上这段代码（其实不加有些浏览器也能自动找到根目录的favicon.ico，但加上更稳妥）：<link rel="icon" type="image/x-icon" href="/favicon.ico">
现代多设备适配方案
如果想让你的图标在手机主屏、平板、高分辨率显示器上都显示得完美，就需要准备不同尺寸的PNG图标，然后对应添加链接：
- 准备这些常用尺寸的PNG图标（支持透明背景，显示效果更好）：
- 16x16px：浏览器标签栏显示
- 32x32px：Windows任务栏、快捷方式
- 96x96px：桌面快捷方式
- 180x180px：苹果设备主屏的Touch Icon
- 把这些图标放到网站的某个子目录里，比如
/assets/icons/ - 在
<head>里添加这些link标签：<!-- 适配常规浏览器 --> <link rel="icon" type="image/png" sizes="16x16" href="/assets/icons/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="96x96" href="/assets/icons/favicon-96x96.png"> <!-- 适配苹果设备主屏 --> <link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon-180x180.png">
几个实用小提示
- 格式选择：除了ICO和PNG，也可以用SVG格式的图标（支持无损缩放），只需要把
type改成image/svg+xml就行 - 路径检查：一定要确保
href里的路径正确！如果图标和HTML文件在同一文件夹，直接写文件名；如果在子文件夹，用相对路径（比如./icons/favicon.ico）或者绝对路径（/icons/favicon.ico） - 缓存问题：如果更新了图标但浏览器还是显示旧的，试试清除浏览器缓存，或者在文件名后面加个版本参数（比如
favicon.ico?v=2），强制浏览器加载新文件
内容的提问来源于stack exchange，提问作者Ravi Madusanka
