HTML 网站图标
favicon（Favorite Icon）是显示在浏览器标签页、地址栏和收藏夹中的小图标。它有助于品牌识别和用户体验。
基本用法
使用<link>标签在HTML的<head>部分添加favicon：
示例
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head> 多种图标格式
为不同设备和场景提供多种图标：
完整示例
<!-- 传统favicon -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- PNG格式图标 -->
<link rel="icon" href="favicon-16x16.png" sizes="16x16">
<link rel="icon" href="favicon-32x32.png" sizes="32x32">
<!-- Apple Touch Icon（iOS主屏幕） -->
<link rel="apple-touch-icon" href="apple-icon.png">
<!-- Android PWA图标 -->
<link rel="manifest" href="manifest.json"> 推荐图标尺寸
| 用途 | 尺寸 | 格式 |
|---|---|---|
| 浏览器标签 | 16x16, 32x32 | ICO/PNG |
| Apple设备 | 180x180 | PNG |
| Android设备 | 192x192, 512x512 | PNG |
| Windows磁贴 | 150x150 | PNG |
最佳实践
建议
- favicon.ico应放在网站根目录，浏览器会自动查找
- 使用ico格式可包含多种尺寸
- 为移动设备提供apple-touch-icon
- 确保图标简洁，在小尺寸下清晰可辨