Favicon 配置指南
完整的 favicon 配置流程,让您的网站拥有专业的品牌标识。本指南将引导您从准备图片到完成配置的全过程。
Favicon 配置概览
什么是 Favicon?
Favicon(收藏夹图标)是显示在浏览器标签页、书签栏和搜索结果中的小图标。一个好的 favicon 能够提升品牌识别度和用户体验。
标准尺寸
- • 16x16px - 浏览器标签页
- • 32x32px - 任务栏图标
- • 180x180px - iOS Safari
- • 192x192px - Android Chrome
- • 512x512px - PWA 应用图标
文件格式
- • favicon.ico - 传统格式
- • PNG - 现代推荐格式
- • SVG - 矢量图标
- • WebP - 新兴格式

不同设备上的 Favicon 显示效果
步骤1: 准备原始图片
图片要求
推荐规格
- 最小尺寸:512x512px
- 格式:PNG, JPG, SVG
- 背景:透明或纯色
- 设计:简洁明了,易识别
设计建议
- 避免过于复杂的细节
- 使用高对比度颜色
- 确保小尺寸下清晰
- 与品牌视觉保持一致
步骤2: 使用在线转换工具
推荐工具:Favicon.io
我们推荐使用 favicon.io 在线转换工具,它能够自动生成所有需要的尺寸和格式。
操作步骤:
- 1
- 2上传您的图片
点击"选择文件"按钮,上传您准备好的图片文件 - 3预览和调整
检查预览效果,确保图标在不同尺寸下都清晰可见 - 4下载生成的文件
点击"Download"按钮,下载包含所有必需文件的压缩包
💡 生成的文件包含:
- • android-chrome-192x192.png
- • android-chrome-512x512.png
- • apple-touch-icon.png
- • favicon-16x16.png
- • favicon-32x32.png
- • favicon.ico
- • site.webmanifest

favicon.io 在线转换工具界面
步骤3: 复制文件到项目
文件复制指南
将下载的所有文件复制到您项目的 public
目录下。
操作步骤:
- 1解压下载的文件
将从 favicon.io 下载的 ZIP 文件解压到临时文件夹 - 2找到项目的 public 目录
在您的项目根目录找到public/
文件夹 - 3复制所有文件
将解压出的所有 favicon 文件复制到public/
目录 - 4覆盖旧文件
如果存在同名文件,选择覆盖以确保使用最新的图标
📁 最终的 public 目录结构:
public/ ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── apple-touch-icon.png ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── site.webmanifest └── 其他文件...

将 favicon 文件复制到 public 目录
步骤4: 完成配置
🎉 无需额外配置
好消息!我们的模板已经预配置了所有 favicon 相关的代码。您只需要完成前面的步骤(复制文件到 public 目录),favicon 就会自动生效。
✅ 自动配置包含:
- Next.js 元数据 API 配置
- 多种尺寸图标支持
- PWA 应用图标配置
- 跨平台兼容性
🔍 验证配置
复制文件后,您可以通过以下方式验证:
- • 重启开发服务器
- • 刷新浏览器页面
- • 检查浏览器标签页是否显示新图标