Favicon 生成器 上传一张 PNG / SVG / HEIC，自动生成 favicon.ico（16/32/48 多尺寸合一）+ favicon-16/32/48.png + apple-touch-icon（180）+ icon-192 / icon-512（Android PWA）+ maskable-512（PWA Maskable 自适应图标）+ site.webmanifest + HTML 引用片段 + README，一键 ZIP 打包。全部在浏览器本地完成，不上传任何字节。
| 文件 | 尺寸 | 用途 |
|---|---|---|
| favicon.ico | 16/32/48 合一 | 浏览器标签栏、Windows 任务栏 |
| favicon-16.png | 16×16 | 备选 PNG |
| favicon-32.png | 32×32 | 备选 PNG |
| favicon-48.png | 48×48 | 备选 PNG |
| apple-touch-icon.png | 180×180 | iOS”添加到主屏”图标 |
| icon-192.png | 192×192 | Android PWA 桌面 |
| icon-512.png | 512×512 | PWA 启动画面、商店列表大图 |
| maskable-512.png | 512×512（20% safe zone） | Android 自适应图标（Play Store 必需） |
| favicon.svg | 矢量 | 现代浏览器，自动跟随暗色模式 |
| site.webmanifest | — | PWA 配置清单 |
<link> 加 ?v=2 版本号，否则访客可能 1 周看旧的<link>，老浏览器会自动用 ICO，无需 JS 判断解压 ZIP 后把所有文件放到网站 根目录（和 index.html 同级），然后把 README.txt 里的四行 <link> 粘进 HTML 的 <head>，或直接点工具页面里"HTML <head> 引用片段"右上角的复制按钮。favicon.ico 走 Chrome/Edge/Safari 浏览器标签栏；apple-touch-icon.png 走 iOS"添加到主屏幕"；icon-192.png / icon-512.png + site.webmanifest 走 Android PWA。manifest 里的 name、theme_color 记得改成你自己站点的。
Android 的自适应图标机制：系统会用一个统一形状（圆形、圆角方、水滴等）去遮罩你的图标，所以图标内容必须缩在中央安全区里、背景必须非透明（否则边缘被裁掉就露白）。本工具默认按 W3C 推荐做法：内容缩到 60%、留 20% safe zone、背景透明时自动改用白底，并在 site.webmanifest 里写 purpose: "maskable"。PWA 想上架 Google Play Store 是硬性要求，普通官网勾不勾都行。
SVG 最佳，512×512 PNG 次之。SVG 输入时本工具会同时栅格化出所有尺寸的 PNG，并把原始 SVG 文件原样打进 ZIP 作为 favicon.svg，HTML 片段里多一行 <link rel="icon" type="image/svg+xml">，现代浏览器优先用矢量、老浏览器回落 ICO。长宽不等会居中裁成正方形，主元素最好贴中间。不要用 JPG——有损压缩在 16×16 小图里会产生明显噪点。
内边距：源图主体已经贴边（例如手机 App 图标设计图，本来就是占满画布的），生成 favicon 时会觉得"撑爆"，加 8–15% padding 留点呼吸空间；如果源图本身就有充足边距，保持 0% 即可。背景：透明适合 PNG/SVG 输出且站点风格不挑；浅色站点的暗色图标建议刷白底，避免 Safari 标签栏在浅灰背景下看不清；暗色站点反过来。Maskable 在透明模式下会自动用白底（规范强制）。
ICO 是容器格式，可以同时装多个尺寸的位图。浏览器按当前显示需求自动挑：Chrome 标签栏 16×16、收藏夹/历史 32×32、Windows 任务栏/桌面快捷方式 48×48。本工具的 favicon.ico 把这三张都装进去，所以一份 ICO 在浏览器各处都清晰。不要用 PNG 改后缀当 ico——浏览器只识别真正的 ICO 二进制结构，PNG 重命名会直接显示空白图标。
SVG favicon 现代浏览器全支持（Chrome 80+ / Firefox 41+ / Safari 9+，Edge 跟 Chrome 同步）；老浏览器会自动回落到 favicon.ico，所以 HTML 同时写两行 <link> 最稳。优势：(1) 任意 DPR 不糊（Retina 屏、4K 显示器尤明显）；(2) 支持 prefers-color-scheme——可以在 SVG 里写 <style>@media (prefers-color-scheme: dark) { .fg { fill: white } }</style>，浏览器自动切深色 favicon。本工具透传原始 SVG，你的样式都会保留。
浏览器会激进缓存 favicon，常需 1–7 天才更新。强制刷新方法：(1) 在 HTML 的 <link> 后加版本参数：<link rel="icon" href="/favicon.ico?v=2">，访客下次访问就拿新图；(2) 自己测试时按 Ctrl+Shift+R 硬刷新只清当前页缓存，favicon 缓存得清整个域的浏览器缓存或在隐身窗口看；(3) Chrome 还可以 chrome://favicon 强制刷新。上线时务必加 ?v= 版本号——比让访客一周看旧 favicon 强。
能。本工具内置 HEIC（heic2any 解码）和 TIFF（UTIF 解码）支持，iPhone 直接传过来的 HEIC 头像、扫描仪出的 TIFF 都能用。但强烈建议先转成 PNG 或 SVG 再做 favicon 源图——HEIC 多是照片，做 16×16 favicon 会糊成一团；TIFF 多是扫描件，背景常带杂色。Favicon 的最佳源是矢量 SVG 或大尺寸 PNG 设计图。
不会。HEIC 解码用 heic2any（wasm）、TIFF 用 UTIF、ICO 编码是本页代码手写，所有处理都在浏览器 Canvas 里完成，不发送任何字节到服务器，断网可用。适合处理未发布的 Logo 设计稿、内部品牌素材。