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


## 工具简介

**Favicon 生成器**是工具派推出的一款网站图标一站式制作工具：上传一张 Logo 或图片，即可在浏览器本地自动生成 16×16 到 512×512 共 11 种尺寸的图标，并支持打包下载包含多分辨率 `favicon.ico`、各尺寸 PNG 以及 PWA 所需的 `site.webmanifest` 的 ZIP 压缩包，同时给出可直接粘贴的 HTML `<head>` 引用代码。所有渲染都在 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 自动生成**：实时生成 `<link>` 引用标签和 `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。下图为初始空态，上传图片后右侧会自动生成各尺寸图标预览。

![Favicon 生成器主界面（初始空态）：左侧为上传区、尺寸选择复选框、裁剪模式、图标形状、背景填充色与打包下载按钮；右](article/202607/1783967166021_9464.png)

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 `<head>` 代码」区设置「文件前缀」（图标部署路径，默认 `/favicon`）和「应用名称」，复制 `<link>` 标签粘贴到网页 `<head>` 中；`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`，生成的 `<link>` 代码会自动拼好路径，复制即用。

## 常见问题

**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 打包全部在浏览器本地完成，断网也能使用（页面已加载的前提下），隐私安全有保障。


免费在线 Favicon 生成器使用教程：上传图片自动生成 16/32/180/192/512 等多尺寸网站图标，支持 contain/cover 裁剪、圆角圆形与 maskable 形状、透明背景，一键打包下载含 favicon.ico 与 site.webmanifest 的 ZIP，并复制 HTML <head> 引用代码。

Favicon 生成器教程：上传图片一键生成多尺寸图标、ICO 与 PWA manifest