Favicon 配置指南

完整的 favicon 配置流程,让您的网站拥有专业的品牌标识。本指南将引导您从准备图片到完成配置的全过程。

Favicon 配置概览

什么是 Favicon?

Favicon(收藏夹图标)是显示在浏览器标签页、书签栏和搜索结果中的小图标。一个好的 favicon 能够提升品牌识别度和用户体验。

标准尺寸

  • • 16x16px - 浏览器标签页
  • • 32x32px - 任务栏图标
  • • 180x180px - iOS Safari
  • • 192x192px - Android Chrome
  • • 512x512px - PWA 应用图标

文件格式

  • • favicon.ico - 传统格式
  • • PNG - 现代推荐格式
  • • SVG - 矢量图标
  • • WebP - 新兴格式
Favicon配置概览示意图

不同设备上的 Favicon 显示效果

步骤1: 准备原始图片

图片要求

推荐规格

  • 最小尺寸:512x512px
  • 格式:PNG, JPG, SVG
  • 背景:透明或纯色
  • 设计:简洁明了,易识别

设计建议

  • 避免过于复杂的细节
  • 使用高对比度颜色
  • 确保小尺寸下清晰
  • 与品牌视觉保持一致

步骤2: 使用在线转换工具

推荐工具:Favicon.io

我们推荐使用 favicon.io 在线转换工具,它能够自动生成所有需要的尺寸和格式。

操作步骤:

  1. 1
    访问转换页面
    打开 https://favicon.io/favicon-converter/
  2. 2
    上传您的图片
    点击"选择文件"按钮,上传您准备好的图片文件
  3. 3
    预览和调整
    检查预览效果,确保图标在不同尺寸下都清晰可见
  4. 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在线转换工具操作界面

favicon.io 在线转换工具界面

步骤3: 复制文件到项目

文件复制指南

将下载的所有文件复制到您项目的 public 目录下。

操作步骤:

  1. 1
    解压下载的文件
    将从 favicon.io 下载的 ZIP 文件解压到临时文件夹
  2. 2
    找到项目的 public 目录
    在您的项目根目录找到 public/ 文件夹
  3. 3
    复制所有文件
    将解压出的所有 favicon 文件复制到 public/ 目录
  4. 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
└── 其他文件...
文件复制到public目录示意图

将 favicon 文件复制到 public 目录

步骤4: 完成配置

🎉 无需额外配置

好消息!我们的模板已经预配置了所有 favicon 相关的代码。您只需要完成前面的步骤(复制文件到 public 目录),favicon 就会自动生效。

✅ 自动配置包含:

  • Next.js 元数据 API 配置
  • 多种尺寸图标支持
  • PWA 应用图标配置
  • 跨平台兼容性

🔍 验证配置

复制文件后,您可以通过以下方式验证:

  • • 重启开发服务器
  • • 刷新浏览器页面
  • • 检查浏览器标签页是否显示新图标

目录