FAVICON GENERATOR
Favicon 生成器，一次出全套。
Favicon 是显示在浏览器标签、书签与搜索结果里的小图标。现代网站需要的不止一个 16×16 的 .ico：还有 apple-touch-icon、PWA 的 192/512 与 maskable、以及矢量 favicon.svg。本页讲清各尺寸的用途差异、HTML 里的引用写法与常见错误；如果需要直接产出文件，用文末的图标生成器一键生成全套并打包下载。
打开图标生成器（Favicon 标签）生成器的 Favicon 标签即产出多尺寸 .ico + PWA 全套 + favicon.svg，全部在浏览器本地完成，不上传图片。
什么是 Favicon？
Favicon（favorite icon）是网站的小图标，出现在浏览器标签页、地址栏、书签、历史记录与搜索结果中。传统格式是 .ico（一个文件可内含多个尺寸），现代浏览器也支持 PNG 与 SVG。一个完整的网站图标集通常包含：多尺寸 favicon.ico、apple-touch-icon.png（iOS 添加到主屏）、PWA 用的 192/512 PNG（含 maskable）、以及可缩放的 favicon.svg。
网站图标尺寸对照表
常用尺寸与用途；.ico 可把多个尺寸打包进一个文件。
| 文件 | 尺寸 | 用途 |
|---|---|---|
favicon.ico | 16 / 32 / 48 | 浏览器标签 / 书签（多尺寸 .ico） |
apple-touch-icon.png | 180 | iOS 添加到主屏 |
favicon-192.png | 192 | PWA / Android 主屏 |
favicon-512.png | 512 | PWA 启动图 / 商店 |
maskable-icon.png | 512 | PWA 自适应（留安全区） |
favicon.svg | 任意 | 矢量，缩放不失真 |
HTML 里怎么引用
把下面几行放进 <head> 即可（路径按实际调整）：
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">rel="icon" 面向现代浏览器，rel="apple-touch-icon" 面向 iOS，PWA 图标在 manifest 里声明。
常见问题排查
下面几条是实际项目里最常卡住人的地方，按症状对照处理即可。
| 症状 | 原因 | 处理 |
|---|---|---|
| 改了图标，刷新没变化 | 浏览器强缓存了旧文件 | 给文件名加版本号（如 favicon.svg?v=2），或用 Ctrl+F5 强制刷新 |
| iOS 添加到主屏没有图标 | 缺 apple-touch-icon，或尺寸不是 180×180 | 补一条 180×180 的 apple-touch-icon，不要依赖 .ico |
| Android 主屏图标被裁掉一圈 | 用了普通图标而未留安全区 | 额外提供 maskable 版本，主体缩到中间 80% 安全区内 |
| 深色模式下图标看不清 | 图标底色与浏览器标签底色接近 | 给浅/深两种底色各做一版，用 media 查询切换 |
| 图标边缘发虚 | 只提供了 16×16，被放大使用 | 在 .ico 内同时打包 16/32/48，或额外提供 SVG |
使用步骤
- 上传一张方形图（或用「文字 / Emoji」直接生成）。
- 在 Favicon 标签预览各尺寸效果。
- 点击「下载全部 ZIP」，解压得到 .ico、PNG、SVG 与 site.webmanifest。
- 按上面的代码把文件放进项目 <head> 与 manifest。
常见问题
favicon.ico 为什么包含多个尺寸？
.ico 是容器格式，可把 16/32/48 等多张位图打包进一个文件，浏览器按场景（标签页用 16、桌面快捷方式用 32/48）自动选取，避免放大模糊。
一定要有 SVG 版吗？
不是必须，但 favicon.svg 矢量缩放不失真，在高分屏与暗色模式下表现更好，现代浏览器普遍支持，建议作为渐进增强。
maskable 图标是什么？
Android 自适应图标会被裁成圆形 / 圆角等形状，maskable 版本在四周留出安全区，确保主体不被裁切。PWA 建议同时提供 any 与 maskable 两种。
图片会上传到服务器吗？
不会。生成与打包全部在浏览器本地完成，原图不会离开你的设备。