一次性导出多尺寸多格式图标：generate a favicon 教程
想一次性导出多种尺寸和格式的图标，省得逐个转换？这篇教程带你用浏览器工具 generate a favicon，一次生成 ICO、PNG、SVG 全套文件并正确接入网站。
想一次性导出多种尺寸和格式的图标，其实不需要安装任何软件，也不用在几个转换网站之间来回折腾。你只需要一张清晰的源图，然后在一个工具里勾选所有需要的尺寸和格式，点一次导出，就能拿到 ICO、PNG、SVG 以及配套的站点清单文件。这篇教程会用浏览器工具 generate a favicon，把整个流程拆成几步，跟着做就行。
整个过程不需要注册账号，图片也不会被上传到服务器，全部在你的浏览器里完成。
为什么不要逐个转换图标
很多新手的第一反应是：先做一张 32×32 的图标，再单独转一张 180×180 的，再转一张 512×512 的。这样做有几个明显的麻烦。
- 容易漏尺寸。不同浏览器、不同设备读取的图标尺寸并不一样，漏掉一个就可能在某些场景下显示空白或模糊。
- 风格不统一。分几次转换，缩放算法和压缩参数可能不同，同一套图标看起来会有细微差别。
- 耗时。每转一次都要下载、重命名、再放回项目目录，文件一多就很容易搞混。
一次性导出能把这些问题一起解决：所有文件来自同一张源图、同一套参数，命名也统一，后面配置 HTML 时直接照着写即可。
准备工作：一张清晰的源图
在开始之前，先准备好源图。源图的质量直接决定导出图标的质量，所以这一步值得多花两分钟。
- 尺寸够大。建议源图至少在 512×512 像素以上。尺寸越大，缩小到小图标时细节越干净。
- 格式通用。PNG 或 SVG 都可以。PNG 支持透明背景，SVG 是矢量图，缩放不会失真。
- 构图简单。图标最终会以很小的尺寸出现在浏览器标签页上，线条太细、文字太多都会糊成一团。用简单的图形或首字母更稳妥。
- 背景处理。如果希望图标在深色和浅色标签栏上都好看，透明背景通常更灵活。
小提示：如果你的标志里带有很细的文字，考虑单独做一个去掉文字的简化版本专门用于小尺寸图标。
第一步：上传或拖入源图
打开 FaviconForge 的生成器页面，你会看到一个上传区域。把准备好的源图直接拖进去，或者点击选择文件。
因为工具完全在浏览器里运行，图片不会离开你的设备，所以公司标志、未发布项目的图标都可以放心处理。上传后，页面会显示预览，你可以先确认图形是否完整、边缘是否干净。
第二步：勾选需要的尺寸与格式
这是整篇教程里最关键的一步，也是「一次性导出」的核心。你需要在同一个界面里把所有需要的尺寸和格式都选上，而不是分批处理。
常见尺寸怎么选
下面这张表列出了常见的图标尺寸和大致用途，可以对照着勾选：
| 尺寸 | 常见用途 |
|---|---|
| 16×16 | 浏览器标签页、书签栏 |
| 32×32 | 桌面浏览器标签页、任务栏 |
| 48×48 | Windows 快捷方式 |
| 180×180 | iOS 主屏幕图标（apple-touch-icon） |
| 192×192 | Android 主屏幕、站点清单 |
| 512×512 | 站点清单中的大图标、安装提示 |
如果你不确定，宁可多勾几个。多出来的文件不会拖慢网站，因为浏览器只会按需下载它需要的那一个。
格式怎么选
- ICO：传统 favicon 格式，一个文件里可以打包多个尺寸，兼容性最好。
- PNG：现代浏览器普遍支持，适合较大尺寸和移动端图标。
- SVG：矢量格式，缩放不失真，适合支持它的现代浏览器。
把这三类都勾上，基本可以覆盖绝大多数访问场景。
第三步：一次性导出全部文件
确认尺寸和格式后，点击生成按钮。工具会一次性把所有勾选的图标渲染出来，并提供打包下载。
- 检查预览里的每个尺寸，尤其是 16×16 和 32×32，看看小尺寸下图形是否还认得出来。
- 如果某个尺寸糊了，回到源图调整构图，再重新 generate a favicon，而不是单独去修那一张。
- 下载压缩包，解压后你会得到一个包含全部图标文件的文件夹。
- 把文件夹整体放进网站的根目录，或者放进专门的
/assets/icons/目录，保持路径统一。
建议在项目里保留这张源图和导出配置的说明，以后换标志时可以直接复用同样的尺寸组合，不用重新想一遍。
第四步：把图标接入你的网站
文件导出好了，接下来要让浏览器知道去哪里找它们。在网页的 <head> 里加入下面这些标签，路径按你的实际目录调整：
<link rel="icon" href="/assets/icons/favicon.ico" sizes="any"> <link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/assets/icons/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png"> <link rel="icon" type="image/svg+xml" href="/assets/icons/favicon.svg">
如果导出的压缩包里带有站点清单文件（site.webmanifest），也一并放到根目录，并在 <head> 里引用：
<link rel="manifest" href="/site.webmanifest">
清单文件里会列出 192×192 和 512×512 等较大图标，用于 Android 主屏幕和「添加到主屏幕」的场景。请确认清单里的路径与你实际存放的位置一致。
部署后怎么验证
- 打开网站，看浏览器标签页上的图标是否正常显示。
- 强制刷新（多数浏览器是 Ctrl+F5 或 Cmd+Shift+R），避免看到旧的缓存图标。
- 用手机访问一次，测试「添加到主屏幕」后的图标效果。
- 如果图标不显示，先检查路径大小写和文件是否真的上传成功，这是最常见的原因。
常见问题与检查清单
导出后图标还是模糊怎么办
多半是源图本身分辨率不够，或者图形细节太多。换一张更大的源图，或者简化构图，再重新 generate a favicon 一次即可。
需要每次都重新生成吗
不需要。图标是静态文件，只要标志不变就不用动。只有更换品牌视觉时，才需要回到工具里重新 generate a favicon 并替换文件。
发布前检查清单
- 源图尺寸足够大，构图在小尺寸下依然清晰。
- ICO、PNG、SVG 三种格式都已导出。
- 16、32、48、180、192、512 等常用尺寸没有遗漏。
- 所有文件放在同一个目录，路径与 HTML 中写的一致。
- 站点清单文件已引用，且其中的图标路径正确。
- 桌面和手机上都实际验证过一次。
把上面的步骤走一遍，你就能一次性拿到整套图标文件，不用再逐个转换、逐个重命名。想马上开始的话，直接打开 FaviconForge 图标生成器，拖入源图、勾选尺寸和格式，一次导出全部文件。