01
用手上最大、最接近正方形的源图
SVG 或至少 512 px 的正方形 PNG 效果最清晰。非正方形的图会居中而不是裁切；小于 512 px 的位图会提示实际尺寸，因为 512 px 的 Android 图标只能靠放大得到。
- 截图或复制的图片可以直接按 Ctrl/Cmd+V 粘贴进来。
- 拖入 .ico 时，会用其中最大的一张作为源图。
图片 / SVG / 图标
Favicon 图标制作一张图出齐所有尺寸
拖入 logo 或现成的 .ico，看清 16 px 标签页效果，再整包下载。
Favicon 图标制作工具
源图片
把 PNG、JPG、WebP、GIF、SVG 或 ICO 文件拖到这里，也可以直接粘贴剪贴板里的图片。
图片只在当前浏览器标签页里读取和缩放，不会上传。
图标包预览
选择、拖入或粘贴一张图片即可开始。
选择、拖入或粘贴一张图片即可开始。
新站上线、换 logo、或者 Lighthouse 报「缺少 apple-touch-icon」，最后都落到同一件事：手上只有一张 logo，却要准备五六个尺寸的图标文件和对应的 <link> 标签。这个 Favicon 图标制作工具从一张源图出齐整套文件，不用在修图软件里把同一张图缩六遍。
反过来也行：把接手项目里那个来历不明的 favicon.ico 拖进来，就能看到里面到底存了哪几个尺寸，逐个另存为 PNG，并用最大的那张补齐缺失的 Apple 和 Android 图标。
为什么用这个 Favicon 图标制作工具
只生成浏览器和手机现在真正会读取的文件，不多给一堆早已淘汰的尺寸。
一张源图，出齐当前整套文件
多尺寸 favicon.ico、16 和 32 px 的 PNG、180 px 的 apple-touch-icon、192 和 512 px 的 Android 图标以及 site.webmanifest，全部来自同一张图。引用代码按你填写的真实路径生成，站点放在 /static/ 下也不用手改六处。
打开 ICO，看清里面到底装了什么
拖入现有的 favicon.ico，会逐张列出内嵌图像的真实尺寸、位深、PNG 还是 BMP 编码以及字节数。可以单张另存为 PNG，也可以全部打包成 ZIP，ICO 转 PNG 不必再找第二个网站。
iPhone 主屏幕上不会出现黑底
iOS 会把透明的触摸图标铺在黑底上。因此 apple-touch-icon 始终用背景色填满，并保持直角交给 iOS 自己加圆角遮罩；浏览器用的图标则保留透明。
决定图标好不好看的三个细节
02
看 16 px 标签页，别只看大图
每次修改后约 300 ms 自动重新生成。重点看浅色、深色两个标签页模拟和 4 倍放大图：细线条和小字在 16 px 下基本会消失。宽 logo 加一点边距更好认；圆角只作用于浏览器和 Android 图标。
- 关闭「自动生成」即可手动操作，此时按 Ctrl/Cmd+Enter 生成。
- ICO 保持 16、32、48 即可，除非还要做 256 px 的桌面快捷方式图标。
03
先填路径，再复制 HTML
站点路径会写进每一条 link 标签和 manifest 的每个图标 src。文件如果放在 /assets/icons/，先把它填上，再下载 ZIP、把 HTML 复制到页面的 head 里。
- 应用名称留空时，manifest 会直接省略该字段，而不是写成空字符串。
- 清空或更换图片后，可以用「撤销」恢复一次之前的图片和设置。
图标包里有什么，又是怎么检查的
当前需要的文件，平铺打包
favicon.ico、favicon-16x16.png、favicon-32x32.png、apple-touch-icon.png、android-chrome-192x192.png、android-chrome-512x512.png 和 site.webmanifest；源图是 SVG 时再加一个 favicon.svg。所有文件都在 ZIP 根目录，解压后直接放到首页旁边。
ICO 尺寸可自选
ICO 里可以任意组合 16、24、32、48、64、128、256 px，内部以 PNG 数据存储，当前所有浏览器和 Windows 都能读取。所以它也是一个 PNG 转 ICO 的 ICO 图标制作工具，不只是 Favicon 生成器。
favicon 尺寸检查给出具体数字
源图格式按文件内容识别而不是扩展名，警告里直接写出实际宽高。SVG 可以无损缩放，所以永远不会被判为「太小」。
引用代码与 manifest 互相对得上
link 标签、theme-color meta 和 manifest 的图标列表用的是同一个路径和颜色，HTML 永远不会指向 ZIP 里不存在的文件。
不生成什么，以及原因
- 不从网址抓图，也不检查线上网站
- 全程不发任何网络请求，所以无法导入现有网站的图标，也无法检查已上线的站点。请先把文件保存到本地再拖进来。
- 不生成已淘汰平台的文件
- Windows 磁贴图片与 browserconfig.xml、Safari 的 mask-icon、57–152 px 的旧 Apple 尺寸都不生成。现在的 Edge、Safari 和 iOS 用的就是包里这些文件。
- 暂不提供 maskable 的 Android 图标
- manifest 里的图标不写 purpose。maskable 图标需要安全区预览，因为 Android 会裁掉外圈约五分之一；标错不如不标。
- 只缩放，不裁切
- 源图按比例缩放放进留好边距的正方形并居中，没有裁剪框。主体偏离中心的话，请先裁好再拖进来。
- SVG 原样复制，不重新绘制
- favicon.svg 就是你的原文件。边距、圆角和背景只作用于 PNG 和 ICO，也不会自动生成深色模式版本。
- 输出的 ICO 只用 PNG 编码
- 旧式 BMP 和 256 色 ICO 图像可以读取和提取，但新生成的 ICO 一律存 PNG 数据。动画 GIF 只取第一帧。
- 输入上限
- 源文件最大 20 MB、单边最大 8192 px；ICO 文件最大 10 MB、最多 64 张内嵌图像。应用名称最多 60 个字符。
Favicon 图标制作常见问题
favicon 尺寸要多大？
按现在的浏览器和手机：一个包含 16、32、48 px 的 favicon.ico，16 和 32 px 的 PNG，180 px 的 apple-touch-icon，再加 site.webmanifest 里登记的 192 和 512 px 图标。这正是本页 Favicon 图标制作打包出来的内容。
PNG 直接改后缀成 .ico 可以吗？
多数浏览器能按内容识别出这其实是 PNG，但它不是真正的 ICO：只有一个尺寸，一些老浏览器和 Windows 程序会读不出来。把 PNG 放进这里生成真正的多尺寸 ICO 更稳妥。
favicon 不显示怎么办？
浏览器对 favicon 缓存很顽固，先强制刷新或用无痕窗口打开。然后确认每条 link 标签的 href 和文件实际位置一致：在工具里先填好站点路径再复制 HTML，两者就不会对不上。
favicon 必须是正方形吗？
输出一定是正方形。长方形源图会按比例缩放后居中，短边两侧留透明，并提示原始尺寸。宽幅 logo 在 16 px 下通常不如一个简化的方形标志好认。
favicon.ico 应该放在哪里？
尽量放在网站根目录：部分浏览器、RSS 阅读器和爬虫即使没有 link 标签也会直接请求 /favicon.ico。其他文件可以放在子目录，只要站点路径填对即可。
ICO 图标里一般包含哪些尺寸？
网站用的 favicon.ico 通常含 16、32、48 px。把一个现成的 .ico 拖进来，就能看到它实际包含的每个尺寸、位深和编码方式，并逐个导出为 PNG。
缺了某个尺寸或平台？