网站图标 Favicon
link rel="icon" 设置浏览器标签图标、多种尺寸适配
网站图标 Favicon
Favicon 是浏览器标签页上的小图标——让用户一眼识别你的网站。
学完本章你将： 掌握 link icon 设置、多种尺寸、不同设备适配。
基本设置
html
<head>
<!-- 基本 favicon（.ico 兼容性最好） -->
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- PNG 格式（推荐，支持透明） -->
<link rel="icon" type="image/png" href="favicon-32x32.png">
</head>多种尺寸适配
html
<head>
<!-- 桌面浏览器 -->
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16.png">
<!-- Apple 设备 -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<!-- Android Chrome -->
<link rel="manifest" href="site.webmanifest">
</head>制作 Favicon
| 工具 | 说明 |
|---|---|
| favicon.io | 在线生成，支持文字/图片/Emoji |
| realfavicongenerator.net | 全平台一键生成 |
| 直接设计 | 用 PS/Figma 导出 32×32 PNG |
💡 推荐用 SVG 格式——缩放不失真，一个文件适配所有尺寸。