Favicon Generator：创建 ICO 和 PNG

什么是 Favicon Generator？

Favicon Generator 是一款免费的浏览器工具，可将任意图像转换为现代浏览器、操作系统和移动平台所需的九种标准网站图标尺寸。为新网站设置 favicon 需要生成一组精确像素尺寸的 PNG 文件——浏览器标签页用 16×16、Apple Touch 图标用 180×180、Android Chrome 用 192×192 和 512×512——以及多种中间尺寸。手动完成这些需要在图像编辑器中调整九次尺寸。本工具一键完成全部九种尺寸，显示每种尺寸的带标注预览，并支持单独或批量下载。所有处理均在浏览器中通过 Canvas API 完成——图像不会离开您的设备。

主要功能

生成多种 favicon 尺寸 — 生成 FAVICON_SIZES 数组中定义的全部 9 种尺寸：16、32、48、64、96、128、180、192 和 512 像素正方形。每种尺寸通过将原始图像绘制到目标尺寸的 canvas 上来渲染。
创建 ICO、PNG 和 WebP 格式 — 所有生成的 favicon 均为 PNG 格式（通过 canvas.toDataURL('image/png')）。各文件名遵循 Web 标准：favicon-16x16.png、favicon-32x32.png、apple-touch-icon.png、android-chrome-192x192.png 等。
Apple Touch Icon 支持 — 180×180px 输出命名为 apple-touch-icon.png，这是用户将网站添加到主屏幕时 iOS Safari 查找的文件名。
Android Chrome 图标支持 — 192×192px 输出命名为 android-chrome-192x192.png，512×512px 输出命名为 android-chrome-512x512.png，与标准 manifest.json Web App Manifest 中指定的名称一致。
预览所有生成的尺寸 — 生成后，网格显示每种尺寸在透明度网格背景上的带标注预览图像、文件名、精确像素尺寸以及用途说明（如"浏览器标签图标"、"Apple Touch Icon"、"Chrome Web Store 图标"）。
单独或批量 ZIP 下载 — 每种尺寸都有独立的下载按钮。"全部下载"按钮将所有生成的文件——9 个 PNG favicon、一个 favicon.ico（包含 16、32 和 48px 尺寸）以及一个 site.webmanifest——打包为单个 favicons.zip 压缩包。
自动生成 favicon.ico — 工具使用 PNG-in-ICO 技术构建包含 16、32 和 48px PNG 的标准 ICO 容器文件，可直接用于 <link rel="icon" type="image/x-icon" href="/favicon.ico">。
生成 site.webmanifest — 引用 192 和 512px Android Chrome 图标的即用型 Web App Manifest 文件包含在"全部下载"ZIP 压缩包中。
100% 客户端处理 — canvas 调整尺寸操作完全在浏览器中运行。源图像通过 FileReader 读取，从不传输到任何服务器。
支持任意图像格式 — 文件输入接受 image/*，<img> 元素负责解码文件。JPEG、PNG、SVG、WebP、GIF 和 AVIF 均可作为源图像。

如何使用 Favicon Generator

第一步：上传源图像

点击上传拖放区域或将图像拖拽到上面。为获得最佳效果，请使用正方形图像——工具使用 ctx.drawImage(originalImage, 0, 0, size, size) 将图像缩放以填充每个 favicon canvas，非正方形输入会被拉伸。带透明背景的 512×512px 或更大正方形 PNG 是理想的源图像。图像加载后，将显示包含原始尺寸的预览（如 512 x 512px）。

第二步：生成所有尺寸

点击"生成 Favicon"。工具按顺序处理全部 9 种尺寸：对于每种尺寸，将隐藏 canvas 设置为该尺寸，清除它，绘制缩放后填充 canvas 的图像，并存储结果数据 URL。循环完成后，成功提示确认所有尺寸已生成。

第三步：预览结果

网格出现，并排显示全部 9 个生成的 favicon。每个项目显示：

在透明度网格背景上渲染的预览图像（即使对于 512×512 等较大输出，预览图像也限制为 64×64px）
文件名（如 android-chrome-512x512.png）
精确像素尺寸（如 512x512px）
使用位置说明（如 Android Chrome 启动画面）

这使您可以在下载前直观确认图标在 16×16 等小尺寸下看起来是否正确。

第四步：单独或批量 ZIP 下载

点击任意单个 favicon 旁边的下载按钮保存该特定文件。您也可以单独下载 favicon.ico——它包含单个 ICO 容器中的 16、32 和 48px 尺寸。要一次性下载所有内容，请点击生成的 favicon 卡片标题中的"全部下载"。这将创建包含全部 9 个 PNG 文件、favicon.ico 和 site.webmanifest 文件的 favicons.zip 压缩包。

第五步：将 favicon 添加到您的网站

将下载的 PNG 文件放置在项目的公共根目录中。在 HTML <head> 中添加以下标签：

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

要支持 Android Chrome PWA，请在 manifest.json 中引用 192×192 和 512×512 文件：

{
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

实用示例

新网站设置

场景： 您正在使用 Next.js 构建个人作品集网站，需要从 Logo SVG 生成所有标准 favicon 尺寸。

输入： Logo 的 512×512px 正方形 PNG 导出（透明背景）。

工具生成内容： 九个 PNG 文件：从 favicon-16x16.png 到 android-chrome-512x512.png，所有文件均按浏览器和移动平台的期望命名和调整尺寸。

为什么有用： 手动设置 favicon 需要 9 次单独的导出操作。这里一次点击就替代了整个步骤。

Chrome Web Store 图标

场景： 您正在提交 Chrome 扩展程序，需要按照 Chrome Web Store 商品详情指南要求提供 128×128px 图标。

输入： 您的扩展程序图标素材（任意尺寸）。

工具生成内容： 标注为"Chrome Web Store 图标"的 favicon-128x128.png——正是 Chrome Web Store 所需的文件。

为什么有用： 128×128px 尺寸是许多 favicon 生成器忽略的特定要求。本工具以正确的标准文件名包含了它。

Web 应用 PWA 设置

场景： 您正在为 React 应用添加 Progressive Web App (PWA) 支持，需要 manifest 图标。

输入： 512×512px 应用图标 PNG。

工具生成内容： android-chrome-192x192.png（192×192px）和 android-chrome-512x512.png（512×512px）——Web App Manifest 规范中为 Android Chrome 指定的两种尺寸。

为什么有用： Android Chrome 需要两种尺寸才能正确显示主屏幕图标和启动画面。使用标准文件名预先命名可避免配置错误。

使用技巧和最佳实践

从 512×512px 或更大的正方形图像开始。 工具使用 ctx.drawImage 将您的输入缩放到每个目标尺寸。从更大的正方形图像开始意味着在每个缩放级别都有更多细节可用，减少 16×16 等小尺寸的伪影。

对于有形状轮廓的图标，请使用透明 PNG 作为输入。 如果您的 logo 具有非矩形形状（圆形、盾形或自定义轮廓），请提供带透明背景的 PNG。透明区域会延续到每个 favicon，在浏览器标签页和 iOS 主屏幕上看起来正确。

下载前在 16×16 预览。 网格以显示比例显示每种尺寸。16×16 预览通常最为重要——如果您的 logo 文字在 16px 下不可读，请考虑为最小尺寸设计更简单的纯标志版本。

"全部下载"功能创建 ZIP 压缩包。 所有生成的文件——9 个 PNG favicon、favicon.ico 和 site.webmanifest——被打包到单个 favicons.zip 文件中。这避免了浏览器下载限制，并将所有文件整齐地组织在一个压缩包中。

JPEG 输入有效，但透明区域会变黑。 如果您的源图像是没有透明度的 JPEG，输出 favicon 将具有相同的背景。对于需要透明背景的图标，请提供 PNG 源。

检查您的浏览器下载行为。 某些浏览器在触发"全部下载"时会对每个单独文件进行提示。如果您看到 9 个下载提示，请逐一接受。在启用自动下载的 Chrome 中，所有 9 个文件无需提示即可下载到您的下载文件夹。

常见问题和故障排除

上传时出现"加载错误"提示。 这由 img.onerror 处理程序在浏览器无法将上传的文件解码为图像时触发。确保上传的是有效图像文件（JPEG、PNG、WebP、SVG 等）。损坏的文件或扩展名错误的文件将触发此错误。

生成的 favicon 在 16×16 时看起来模糊。 工具使用双线性插值（浏览器默认值）将完整源图像缩放绘制到 16×16 像素。如果您的源是复杂插图或包含文字，16×16 结果将模糊。这是将复杂图稿缩放到小尺寸的基本限制——请为 16×16 和 32×32 目标设计简化的标志。

"全部下载"未启动。 全部下载功能使用 JavaScript 创建 ZIP 压缩包。如果下载未触发，请检查网站的弹窗和下载是否被允许。您也可以使用各自的下载按钮逐一下载单个文件。

部署后浏览器中的 favicon 未更新。 浏览器 favicon 缓存较为激进。部署新 favicon 后，强制刷新标签页（Ctrl+Shift+R 或 Mac 上的 Cmd+Shift+R）或清除浏览器缓存。通过缓存破坏查询字符串更改 favicon 文件名（如 href="/favicon-32x32.png?v=2"）也会强制刷新。

网格中的 512×512 预览图像限制为 64px。 网格预览将显示限制为 Math.min(size, 64) 像素以保持网格紧凑。下载的文件是正确的完整 512×512px PNG——小显示尺寸仅用于预览。

隐私与安全

Favicon Generator 完全在您的浏览器中运行。您的源图像通过 FileReader.readAsDataURL 加载到 JavaScript Image 对象中，然后绘制到隐藏的 canvas 元素上。不会将任何图像数据发送到外部服务器。所有九个输出 favicon 均从 canvas.toDataURL('image/png') 在本地生成。这对于专有 logo、未发布的品牌标识和机密视觉资产是安全的。页面加载后，工具可完全离线工作。

常见问题解答

Favicon Generator 免费吗？

是的，完全免费。不需要账户，输出中不添加水印，生成 favicon 的次数也没有限制。处理使用的 Canvas API 没有服务器端成本。

Favicon Generator 可以离线使用吗？

是的。页面加载后，所有处理均使用浏览器原生 Canvas API 和 FileReader。图像加载、favicon 生成或下载过程中不进行网络调用。无需网络连接即可使用。

我的数据在 Favicon Generator 中安全吗？

是的。您的图像通过 FileReader 读入浏览器内存，并绘制在 canvas 元素上。不会有图像数据离开您的浏览器。这对于未发布的 logo、机密品牌资产和专有图标来说是安全的。

工具生成哪些尺寸？

工具生成 9 种尺寸：16×16、32×32、48×48、64×64、96×96、128×128、180×180、192×192 和 512×512 像素。每种均以其用途的标准文件名保存为 PNG。

每种尺寸的标准文件名是什么？

文件名遵循 Web 标准：favicon-16x16.png、favicon-32x32.png、favicon-48x48.png、favicon-64x64.png、favicon-96x96.png、favicon-128x128.png、apple-touch-icon.png（180×180）、android-chrome-192x192.png 和 android-chrome-512x512.png。

工具生成 .ico 文件吗？

是的。工具自动生成 favicon.ico 文件，其中包含嵌入在 ICO 容器内的 16、32 和 48px PNG。可直接通过 <link rel="icon" type="image/x-icon" href="/favicon.ico"> 部署。ICO 文件可单独下载，或包含在"全部下载"ZIP 压缩包中。

96×96 尺寸有什么用途？

96×96 的 favicon-96x96.png 在工具的说明数组中标记为"Google TV 图标"。它历史上用于 Google TV 应用图标，出于完整性而包含在完整 favicon 包中。

可以使用 SVG 作为源图像吗？

是的。文件输入接受 image/*，现代浏览器可以使用 <img> 元素解码 SVG。当绘制到 canvas 上时，SVG 由浏览器栅格化。输出将是栅格化的 PNG——而不是矢量 SVG favicon——这适合大多数使用场景。

我应该在源图像中使用透明背景吗？

是的，如果您的图标有形状轮廓。透明背景会延续到 PNG 输出。对于放置在 iOS 主屏幕上的图标（apple-touch-icon.png），iOS 自动添加圆角，因此透明背景看起来正确。对于浏览器标签页 favicon，浏览器的标签页背景透过透明区域显示。

"全部下载"按钮具体做什么？

它将所有生成的文件打包为单个 favicons.zip 压缩包：9 个 PNG favicon、favicon.ico（包含 16、32 和 48px 尺寸）以及一个 site.webmanifest 文件。ZIP 在您的浏览器中生成，作为一个文件下载。

什么是 Favicon Generator？

主要功能

生成多种 favicon 尺寸 — 生成 FAVICON_SIZES 数组中定义的全部 9 种尺寸：16、32、48、64、96、128、180、192 和 512 像素正方形。每种尺寸通过将原始图像绘制到目标尺寸的 canvas 上来渲染。
创建 ICO、PNG 和 WebP 格式 — 所有生成的 favicon 均为 PNG 格式（通过 canvas.toDataURL('image/png')）。各文件名遵循 Web 标准：favicon-16x16.png、favicon-32x32.png、apple-touch-icon.png、android-chrome-192x192.png 等。
Apple Touch Icon 支持 — 180×180px 输出命名为 apple-touch-icon.png，这是用户将网站添加到主屏幕时 iOS Safari 查找的文件名。
Android Chrome 图标支持 — 192×192px 输出命名为 android-chrome-192x192.png，512×512px 输出命名为 android-chrome-512x512.png，与标准 manifest.json Web App Manifest 中指定的名称一致。
预览所有生成的尺寸 — 生成后，网格显示每种尺寸在透明度网格背景上的带标注预览图像、文件名、精确像素尺寸以及用途说明（如"浏览器标签图标"、"Apple Touch Icon"、"Chrome Web Store 图标"）。
单独或批量 ZIP 下载 — 每种尺寸都有独立的下载按钮。"全部下载"按钮将所有生成的文件——9 个 PNG favicon、一个 favicon.ico（包含 16、32 和 48px 尺寸）以及一个 site.webmanifest——打包为单个 favicons.zip 压缩包。
自动生成 favicon.ico — 工具使用 PNG-in-ICO 技术构建包含 16、32 和 48px PNG 的标准 ICO 容器文件，可直接用于 <link rel="icon" type="image/x-icon" href="/favicon.ico">。
生成 site.webmanifest — 引用 192 和 512px Android Chrome 图标的即用型 Web App Manifest 文件包含在"全部下载"ZIP 压缩包中。
100% 客户端处理 — canvas 调整尺寸操作完全在浏览器中运行。源图像通过 FileReader 读取，从不传输到任何服务器。
支持任意图像格式 — 文件输入接受 image/*，<img> 元素负责解码文件。JPEG、PNG、SVG、WebP、GIF 和 AVIF 均可作为源图像。

如何使用 Favicon Generator

第一步：上传源图像

第二步：生成所有尺寸

第三步：预览结果

网格出现，并排显示全部 9 个生成的 favicon。每个项目显示：

在透明度网格背景上渲染的预览图像（即使对于 512×512 等较大输出，预览图像也限制为 64×64px）
文件名（如 android-chrome-512x512.png）
精确像素尺寸（如 512x512px）
使用位置说明（如 Android Chrome 启动画面）

这使您可以在下载前直观确认图标在 16×16 等小尺寸下看起来是否正确。

第四步：单独或批量 ZIP 下载

第五步：将 favicon 添加到您的网站

将下载的 PNG 文件放置在项目的公共根目录中。在 HTML <head> 中添加以下标签：

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

要支持 Android Chrome PWA，请在 manifest.json 中引用 192×192 和 512×512 文件：

{
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

实用示例

新网站设置

场景： 您正在使用 Next.js 构建个人作品集网站，需要从 Logo SVG 生成所有标准 favicon 尺寸。

输入： Logo 的 512×512px 正方形 PNG 导出（透明背景）。

工具生成内容： 九个 PNG 文件：从 favicon-16x16.png 到 android-chrome-512x512.png，所有文件均按浏览器和移动平台的期望命名和调整尺寸。

为什么有用： 手动设置 favicon 需要 9 次单独的导出操作。这里一次点击就替代了整个步骤。

Chrome Web Store 图标

场景： 您正在提交 Chrome 扩展程序，需要按照 Chrome Web Store 商品详情指南要求提供 128×128px 图标。

输入： 您的扩展程序图标素材（任意尺寸）。

工具生成内容： 标注为"Chrome Web Store 图标"的 favicon-128x128.png——正是 Chrome Web Store 所需的文件。

为什么有用： 128×128px 尺寸是许多 favicon 生成器忽略的特定要求。本工具以正确的标准文件名包含了它。

Web 应用 PWA 设置

场景： 您正在为 React 应用添加 Progressive Web App (PWA) 支持，需要 manifest 图标。

输入： 512×512px 应用图标 PNG。

工具生成内容： android-chrome-192x192.png（192×192px）和 android-chrome-512x512.png（512×512px）——Web App Manifest 规范中为 Android Chrome 指定的两种尺寸。

为什么有用： Android Chrome 需要两种尺寸才能正确显示主屏幕图标和启动画面。使用标准文件名预先命名可避免配置错误。

使用技巧和最佳实践

常见问题和故障排除

隐私与安全

常见问题解答

Favicon Generator 免费吗？

是的，完全免费。不需要账户，输出中不添加水印，生成 favicon 的次数也没有限制。处理使用的 Canvas API 没有服务器端成本。

Favicon Generator 可以离线使用吗？

是的。页面加载后，所有处理均使用浏览器原生 Canvas API 和 FileReader。图像加载、favicon 生成或下载过程中不进行网络调用。无需网络连接即可使用。

我的数据在 Favicon Generator 中安全吗？

工具生成哪些尺寸？

工具生成 9 种尺寸：16×16、32×32、48×48、64×64、96×96、128×128、180×180、192×192 和 512×512 像素。每种均以其用途的标准文件名保存为 PNG。

每种尺寸的标准文件名是什么？

工具生成 .ico 文件吗？

96×96 尺寸有什么用途？

96×96 的 favicon-96x96.png 在工具的说明数组中标记为"Google TV 图标"。它历史上用于 Google TV 应用图标，出于完整性而包含在完整 favicon 包中。

什么是 Favicon Generator？

主要功能

如何使用 Favicon Generator

第一步：上传源图像

第二步：生成所有尺寸

第三步：预览结果

第四步：单独或批量 ZIP 下载

第五步：将 favicon 添加到您的网站

实用示例

新网站设置

Chrome Web Store 图标

Web 应用 PWA 设置

使用技巧和最佳实践

常见问题和故障排除

隐私与安全

常见问题解答

Favicon Generator 免费吗？

Favicon Generator 可以离线使用吗？

我的数据在 Favicon Generator 中安全吗？

工具生成哪些尺寸？

每种尺寸的标准文件名是什么？

工具生成 .ico 文件吗？

96×96 尺寸有什么用途？

可以使用 SVG 作为源图像吗？

我应该在源图像中使用透明背景吗？

"全部下载"按钮具体做什么？

相关工具

继续阅读

什么是 Favicon Generator？

主要功能

如何使用 Favicon Generator

第一步：上传源图像

第二步：生成所有尺寸

第三步：预览结果

第四步：单独或批量 ZIP 下载

第五步：将 favicon 添加到您的网站

实用示例

新网站设置

Chrome Web Store 图标

Web 应用 PWA 设置

使用技巧和最佳实践

常见问题和故障排除

隐私与安全

常见问题解答

Favicon Generator 免费吗？

Favicon Generator 可以离线使用吗？

我的数据在 Favicon Generator 中安全吗？

工具生成哪些尺寸？

每种尺寸的标准文件名是什么？

工具生成 .ico 文件吗？

96×96 尺寸有什么用途？

可以使用 SVG 作为源图像吗？

我应该在源图像中使用透明背景吗？

"全部下载"按钮具体做什么？

相关工具

继续阅读