# Favicon 生成器教程：上传图片一键生成多尺寸图标、ICO 与 PWA manifest
> 来源：工具派（https://gjupai.com） 原文页面：https://gjupai.com/tutorial/favicon-generator-guide
## 工具简介
**Favicon 生成器**是工具派推出的一款网站图标一站式制作工具：上传一张 Logo 或图片，即可在浏览器本地自动生成 16×16 到 512×512 共 11 种尺寸的图标，并支持打包下载包含多分辨率 `favicon.ico`、各尺寸 PNG 以及 PWA 所需的 `site.webmanifest` 的 ZIP 压缩包，同时给出可直接粘贴的 HTML `` 引用代码。所有渲染都在 Canvas 上本地完成，图片不会上传到任何服务器，无需安装、打开即用。
## 功能亮点
- **11 种常用尺寸一键生成**：覆盖 16、32、48、64、96、128、180（apple-touch-icon）、192、256、384、512 全系列，默认勾选 16/32/48/180/192/512 六个最常用尺寸，可「全选」或逐个勾选。
- **三种裁剪模式**：居中 contain（完整显示、留白居中）、裁剪 cover（铺满、裁掉多余部分）、拉伸（强制撑满，可能变形），适配不同比例的原图。
- **四种图标形状**：方形、圆角（20% 圆角半径）、圆形、自适应（maskable，自动留 20% 安全边距，适配 Android 自适应图标裁切）。
- **背景与透明控制**：可自定义背景填充色（默认白色 `#ffffff`），也可勾选「透明」输出透明背景图标。
- **多分辨率 favicon.ico 打包**：勾选后自动把 ≤256 的尺寸合并进一个标准 `.ico` 文件，老浏览器兼容性最好。
- **HTML 代码与 manifest 自动生成**：实时生成 `` 引用标签和 `site.webmanifest` 内容，支持自定义文件前缀和应用名称，一键复制。
- **单个下载 + ZIP 打包**：预览区每个尺寸可单独下载 PNG，也可一键打包全部文件（命名格式 `原文件名-icons.zip`）。
## 参数说明
| 参数 | 说明 | 默认值 / 取值 |
| --- | --- | --- |
| 上传图片 | 源图片，点击或拖拽上传 | JPG、PNG、WEBP、SVG，最大 5MB |
| 尺寸选择 | 勾选需要生成的图标尺寸，可全选/取消全选 | 默认 16、32、48、180、192、512 |
| 裁剪模式 | 原图与目标尺寸比例不一致时的适配方式 | 居中 contain（默认）/ 裁剪 cover / 拉伸 |
| 图标形状 | 输出图标的外形裁剪 | 方形（默认）/ 圆角 / 圆形 / 自适应 maskable |
| 背景填充色 | 图标底色，取色器或十六进制输入 | 默认 `#ffffff`；勾选「透明」后禁用 |
| 透明 | 勾选后输出透明背景图标 | 默认不勾选 |
| 打包多分辨率 favicon.ico | 将 ≤256 的尺寸合并生成 `.ico` 放入 ZIP | 默认勾选 |
| 文件前缀 | HTML 代码中图标文件的路径前缀 | 默认 `/favicon` |
| 应用名称 | `site.webmanifest` 中的 `name` / `short_name` | 默认 `My App` |
## 使用步骤
1. **打开工具页面**：左侧为参数调节区（上传、尺寸、裁剪、形状、背景、下载），右侧上方为尺寸预览区，下方在上传图片后显示生成的 HTML 代码与 manifest。下图为初始空态，上传图片后右侧会自动生成各尺寸图标预览。
2. **上传源图片**：点击上传区域或把图片拖拽进去，支持 JPG、PNG、WEBP、SVG，最大 5MB。上传成功后会显示文件名、大小和原始尺寸。建议使用 ≥512×512 的正方形高清图，缩小后更清晰。
3. **勾选尺寸**：在「尺寸选择」中勾选需要的规格。默认勾选的 16/32/48 用于浏览器标签页，180 用于 iOS 主屏（apple-touch-icon），192/512 用于 PWA 与 Android，一般保持默认即可覆盖主流场景。
4. **选择裁剪模式与形状**：原图不是正方形时，「居中 contain」会完整保留图形并留白；「裁剪 cover」会铺满画布并裁掉多余部分；「拉伸」直接撑满（可能变形）。形状可选方形、圆角、圆形或自适应（maskable）。
5. **设置背景**：用取色器设置背景填充色（默认白色），源图本身带透明背景且希望保留时，勾选「透明」即可。
6. **预览并下载**：右侧「尺寸预览」区实时显示每个勾选尺寸的效果，单个图标可点「下载」单独保存；确认无误后点「打包下载 ZIP」，压缩包内含全部 PNG、多分辨率 `favicon.ico`（勾选时）和 `site.webmanifest`（勾选了 ≥192 尺寸时）。
7. **复制 HTML 代码**：在「HTML `` 代码」区设置「文件前缀」（图标部署路径，默认 `/favicon`）和「应用名称」，复制 `` 标签粘贴到网页 `` 中；`site.webmanifest` 内容可复制或单独下载，把 ZIP 里的文件按前缀路径部署到网站根目录即可生效。
## 使用技巧
- **源图越大越清晰**：所有尺寸都由原图缩小渲染，上传 512×512 或更大的正方形图，小尺寸（16×16）细节保留最好；小图放大成 512 会模糊。
- **做 PWA 务必勾选 192 和 512**：只有勾选了 ≥192 的尺寸，ZIP 中才会生成 `site.webmanifest`，且 manifest 的 `purpose` 会随形状自动设置为 `maskable any`（自适应形状）或 `any`。
- **「自适应」形状自带安全区**：选择 maskable 后图形会自动缩到 80% 区域内，避免被 Android 系统的圆形/水滴形裁切遮挡关键内容，重要 Logo 元素建议本身就放在画面中心。
- **透明背景 vs 背景色**：图标用于浏览器标签页时建议保留透明；用于 iOS 主屏（apple-touch-icon）时系统不支持透明，建议设一个品牌色背景。
- **非正方形 Logo 优先用 contain**：「裁剪 cover」会切掉边缘内容，容易把 Logo 切残；「居中 contain」配合背景色或透明最安全。
- **文件前缀要与部署路径一致**：例如图标放在 `https://example.com/icons/` 下，就把前缀改为 `/icons`，生成的 `` 代码会自动拼好路径，复制即用。
## 常见问题
**Q1：支持上传什么格式、多大的图片？**
支持 JPG、PNG、WEBP、SVG，文件最大 5MB。超出限制或非图片文件会在页面顶部给出红色错误提示。
**Q2：生成的 ZIP 包里都有什么？**
包含所有勾选尺寸的 `favicon-{尺寸}x{尺寸}.png`；若勾选「打包多分辨率 favicon.ico」且存在 ≤256 的尺寸，额外包含合并好的 `favicon.ico`；若勾选了 ≥192 的尺寸，额外包含 `site.webmanifest`。
**Q3：16×16 的图标看起来很糊怎么办？**
这是小尺寸图标的通病。建议：上传更高清的源图；简化 Logo 细节（细线条在小尺寸下会糊成一团）；优先使用「居中 contain」避免边缘信息丢失。
**Q4：「自适应」和普通形状有什么区别？**
自适应（maskable）会把图形限制在 80% 的安全区内，保证被 Android 系统裁成圆形、圆角方形等任意形状时主体不被切掉，生成的 manifest 也会标记 `purpose: "maskable any"`，是做 PWA 图标的推荐选项。
**Q5：我的图片会上传到服务器吗？**
不会。图片读取、Canvas 渲染、ICO 合成、ZIP 打包全部在浏览器本地完成，断网也能使用（页面已加载的前提下），隐私安全有保障。