Favicon 生成器 — PNG/SVG 转 ICO

网站图标（Favicon）的多端适配与生成

在现代网页开发中，一个完整的网站图标系统不仅用于浏览器的标签页，还需要适配苹果 iOS 设备的“添加到主屏幕”图标、Android 系统以及渐进式网页应用（PWA）等多种场景。

“Favicon 生成器”是一个能够将单张图片转换为全套网站图标的在线工具。它支持将您提供的 PNG、JPG 或 SVG 格式的源图片，一键转换为适用于各种设备和平台的图标文件包，并自动生成可以直接嵌入网页的 HTML 代码片段，帮助网站创作者快速完成多端图标的部署。

为了保证生成的图标在各种高分辨率屏幕上都能保持清晰，建议在上传前了解以下输入规范与设置项：

支持的格式与大小：工具支持 PNG、JPG 和 SVG 格式的图片，文件大小限制在 50 MB 以内。
推荐尺寸：如果使用 PNG 或 JPG 格式，建议源图片尺寸至少为 512 × 512 像素。如果源图片较小，生成大尺寸图标时会被拉伸放大，可能会导致图标边缘发虚。
非正方形图片处理：由于所有生成的图标均为正方形，如果您的源图片不是正方形，可以通过以下两种方式进行适配：
- 完整显示（默认）：完整保留画面，将图片居中显示，并在四周留白。
- 裁剪填满：让画面铺满正方形，超出正方形边缘的部分会被裁剪掉。
背景设置：
- 透明（默认）：不添加任何背景颜色。透明背景非常适合浏览器标签页，但在 iPhone 等设备的主屏幕上，透明区域可能会被系统自动填充为黑色。
- 颜色：您可以自定义选择一种背景颜色。对于需要兼顾 iPhone 主屏幕显示效果的图标，选择一个背景色会更稳妥。

生成完成后，工具会将所有图标打包成一个 ZIP 文件供您下载，其中包含以下内容：

favicon.ico：经典的浏览器标签页图标，内部集成了 16、32 和 48 像素三种尺寸，确保兼容老旧浏览器。
PNG 图标：包含 16、32、180、192 和 512 像素等多种尺寸，分别用于现代浏览器标签页、iPhone/iPad 主屏幕（Apple touch icons）以及 Android 设备。
site.webmanifest：一个轻量级的文本配置文件，其中列出了适用于 PWA 和 Android 设备的大尺寸图标信息。
SVG 矢量图标：如果您的源图片是 SVG 格式，生成的图标包中会直接包含该矢量文件，确保在任何分辨率下都绝对清晰。
HTML 代码片段：一段可以直接复制的 <link> 标签代码，用于指引浏览器和设备加载对应的图标。

在使用过程中，如果上传的图片或操作不符合规范，系统会显示相应的错误提示：

仅支持 PNG、JPG 和 SVG 图片。：上传了不支持的文件格式。
文件超过 50 MB,请换一张小一些的源图。：上传的文件体积超出了 50 MB 的上限。
请先选择一张 PNG、JPG 或 SVG 图片。：在未加载任何图片的情况下尝试生成图标。
无法把这个文件当作图片打开,它可能已损坏、为空,或者根本不是图片。：上传的文件无法被正常解析。
无法读取这个 SVG,请确认文件是有效的 SVG 文档。：上传的 SVG 文件格式不规范或已损坏。
源图较小({w} × {h} px),大尺寸图标可能发虚。建议用 512 × 512 以上的图片或 SVG。：此提示用于警告源图分辨率不足，但仍可继续生成。
生成失败,请换一张图片试试。：生成过程中遇到未知错误。

本工具充分保护您的数据隐私。您的图片转换过程完全在您的浏览器本地进行，没有任何图片或数据会被上传到 BroBroGo 服务器，您可以放心使用。

图标包内包含 16、32、48 像素三种尺寸的 favicon.ico，16、32、180、192、512 像素的 PNG 图标，以及列出大图标的 site.webmanifest。如果源文件是 SVG，矢量图标本身也会一并放入。所有文件打包成一个 ZIP。

最理想的是 SVG——每个尺寸都直接由矢量绘制，16 像素也清晰锐利。PNG 或 JPG 建议至少 512 × 512，更小的图片放大后会发虚。

标签页图标用透明没问题；但 iPhone、iPad 的主屏幕会把透明区域显示成黑色——如果访客可能把你的网站添加到主屏幕，建议选一个背景色。

图标是正方形的，但你的图片绝不会被拉伸变形。默认把画面完整居中、四周留白；切换到"裁剪填满"则会裁掉长边。

上传到网站根目录，让 favicon.ico 能通过 /favicon.ico 访问，再把生成的代码粘贴到页面的 <head> 里。浏览器会自动挑选合适的尺寸。