Favicon 生成器
把任意图片变成 favicon.ico 及完整的 PNG 与 manifest 图标套件
本地运行
loading…
关于此工具
拖入一张图——最好是 512px 以上的正方形 logo——就能得到完整的 favicon 套件:打包了 16、32、48 px 的 favicon.ico(用于标签页和书签)、各标准尺寸的 PNG(含 180px 的 Apple 触摸图标和 192/512px 的 PWA 图标)、一份起步用的 site.webmanifest,以及可直接粘进 <head> 的 <link> 标签。一个 ZIP 打包所有文件,命名完全遵循约定。
favicon 教程里常被搞错的细节这里都处理好了:ICO 内嵌的是 PNG 压缩条目(Windows Vista 起全平台支持,比老式 BMP 图标小得多);Apple 触摸图标会压平到你选择的背景色上,因为 iOS 会把透明替换成黑色;PWA 图标则保留透明通道。非正方形的源图会居中裁剪而不是压扁。
把 logo 缩到 16px 本质上是破坏性的——精细的细节根本无法保留——所以预览区按真实尺寸显示每一档,发布前就能判断可辨识度。所有渲染都在本地 canvas 上进行,ICO 和 ZIP 容器在页面内逐字节拼装;你的 logo 不会被上传到任何地方。
常见问题
- 2026 年到底需要哪些 favicon 尺寸?
- 比传言少得多:一个含 16/32/48 的 favicon.ico 兼顾旧环境和地址栏、一张 180px 的 apple-touch-icon.png、以及 web app manifest 引用的 192/512px PNG。现代浏览器正是从这套组合里挑选最佳匹配——某些生成器输出的 20 个文件属于货物崇拜。
- 为什么我的 logo 在 16px 下看不清?
- 16 像素小得残酷——文字标、细线条和精细渐变都会溶掉。好的 favicon 会把品牌简化为一个高对比度的粗壮图形。如果这里的 16px 预览糊成一团,就裁剪到标志最有辨识度的部分,或为小尺寸准备一个简化版本。
- 现在还需要 .ico 文件吗,PNG favicon 不够吗?
- 现代浏览器都接受 PNG favicon,但 /favicon.ico 仍是各类 UA、爬虫和老工具会盲目请求的路径。在那里放一个真正的 ICO 只花几 KB,却能消灭一整类 404 和回退怪癖——和 PNG link 一起保留它。
- 为什么 Apple 触摸图标需要背景色?
- iOS 不渲染主屏图标的透明度——PNG 里的透明部分会被合成到黑色上。预先压平到你选定的颜色能让结果可控。选一个和图标匹配的背景色;另外 iOS 会自己切圆角,所以请提供满幅的正方形。