ICO/Favicon 生成指南：网站图标与 PWA 图标全套制作

图片（更新于 2026年6月7日）

为什么需要 Favicon？

Favicon 是显示在浏览器标签页、书签栏、手机主屏幕上的小图标。一个专业的网站必须有 Favicon，否则：

  • 浏览器标签页显示默认空白图标，降低品牌辨识度
  • 书签中难以快速找到你的网站
  • PWA 安装到桌面后缺少图标

Favicon 尺寸规范

不同平台和场景需要的尺寸各不相同：

尺寸 用途 格式
16×16 浏览器标签页（最小） ICO/PNG
32×32 浏览器标签页（标准） ICO/PNG
48×48 Windows 任务栏 ICO
180×180 Apple Touch Icon（iOS） PNG
192×192 Android Chrome PNG
512×512 PWA 启动图标 PNG

ICO 格式说明

ICO 是一种容器格式，一个 ICO 文件可以包含多个尺寸的图标。浏览器会根据需要自动选择最合适的尺寸。这就是为什么 ICO 文件虽然只有几十 KB，却能适配各种场景。

使用 ICO 生成工具

步骤 1：准备源图

选择一张正方形的高清图片作为源图，建议：

  • 分辨率至少 512×512（推荐 1024×1024）
  • 简洁的图形，缩小后仍可辨识
  • 避免细小文字，16×16 下无法阅读

步骤 2：上传并生成

  1. 打开 ICO 生成工具
  2. 上传源图（支持 PNG、JPG、SVG）
  3. 选择需要的尺寸（默认全选 16、32、48、180、192、512）
  4. 点击「生成」

步骤 3：下载文件

工具会生成两个文件：

  • favicon.ico — 包含 16×16、32×32、48×48 的多尺寸 ICO
  • favicon-*.png — 各尺寸的 PNG 文件

HTML 中引用 Favicon

将生成的文件放到网站根目录或 public/ 文件夹，然后在 <head> 中添加：

<!-- ICO（兼容旧浏览器） -->
<link rel="icon" href="/favicon.ico" sizes="any">

<!-- PNG（现代浏览器） -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">

不同框架的配置

框架 配置方式
Next.js 放入 app/ 目录，自动识别
Vite 放入 public/ 目录
Nuxt 放入 public/ 或 assets/
Create React App 放入 public/ 目录

PWA 图标配置

PWA（渐进式 Web 应用）需要在 manifest.json 中声明图标：

{
  "name": "我的应用",
  "icons": [
    {
      "src": "/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Maskable Icon 注意事项

PWA 的 maskable 图标需要保证**安全区域（内圈 80%）**内有完整内容，外圈 20% 可能被系统裁剪为圆形或其他形状。

设计技巧

技巧 1：简化图形

Favicon 只有 16×16 像素，复杂图形会变成一团模糊。只保留最核心的元素：

  • ❌ 完整 Logo + 文字
  • ✅ Logo 核心图形或首字母

技巧 2：使用 SVG 源图

SVG 矢量图作为源图可以保证任意尺寸下都清晰。用 格式转换 将 SVG 转为 PNG 后再生成 ICO。

技巧 3：深色模式适配

现代浏览器支持 media 属性切换深色模式 Favicon：

<link rel="icon" href="/favicon-light.png" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon-dark.png" media="(prefers-color-scheme: dark)">

常见问题

生成的 ICO 在浏览器中不显示？

  1. 确认文件路径正确
  2. 清除浏览器缓存（Ctrl+Shift+R 强制刷新）
  3. 检查 HTML 中 link 标签是否在 <head> 内

ICO 文件比单张 PNG 大？

ICO 包含多个尺寸，体积自然更大。通常 16+32+48 三个尺寸的 ICO 约 15-30 KB，完全可接受。

需要同时提供 ICO 和 PNG 吗？

建议两者都提供。ICO 兼容旧浏览器，PNG 在现代浏览器中有更好的渲染质量。

相关工具

总结

Favicon 虽小，却是网站品牌的重要一环。使用 ICO 生成工具 可以从一张源图快速生成全套尺寸的 ICO 和 PNG 文件，覆盖浏览器标签页、Apple Touch Icon、Android Chrome 和 PWA 启动图标等所有场景。记住核心原则：源图要高清简洁，ICO 包含多尺寸，HTML 引用要完整。

#ICO#Favicon#网站图标#多尺寸#PWA