Favicon生成器
把一个Logo变成整套favicon：所有尺寸的PNG、多尺寸ICO、manifest文件，以及可以粘贴到head里的HTML标签。
把文件拖到这里
.png, .jpg, .jpeg, .webp, .svg · 最大20 MB
如何生成favicon
- 1
添加Logo
PNG、JPG、WebP或SVG，最大20 MB。正方形的原图效果最好，其他形状也能处理。
- 2
选择怎样放进正方形
从中心裁剪成正方形，或者完整保留画面，两侧用你选的颜色填充。
- 3
下载ZIP图标包
共八个文件，加上Android的maskable图标是九个：ICO、四种尺寸的PNG、manifest和一段现成的head代码。
压缩包里有什么，每个文件做什么用
favicon.ico在一个容器里放了16、32和48像素三张图，浏览器至今仍会到网站根目录找它。icon-16.png和icon-32.png是它的现代替代：页面里明确引用它们，偏好PNG的浏览器就不必打开ICO。180像素的apple-touch-icon.png是有人把你的网站添加到主屏幕时iOS使用的图标。icon-192.png和icon-512.png是渐进式网页应用（PWA）的manifest必须列出的两个尺寸。manifest.json把这两个尺寸和你的应用名称、主题色写在一起；head-snippet.html是一段可以直接粘贴到页面里的link和meta标签，属性名和文件路径都不用猜。
为什么apple-touch-icon不保留透明
iOS不会把透明的主屏幕图标合成到合适的底色上，而是用黑色填满透明区域，整洁的Logo就变成了一块深色方块。所以这一个文件的透明通道总会被拼合：拼到你选的背景色上；如果背景留了透明，就拼到白色上。其他尺寸只要原图有透明、你也选择保留，就会保留透明，因为在浏览器标签页和桌面快捷方式上，透明正是想要的效果。如果改为设置背景色，所有尺寸都统一用这个颜色，整套图标保持一致。
矢量原图，输出更清晰
原图是SVG时，每个尺寸都直接从矢量渲染，而不是从一张大位图缩小。这在16像素时最明显：缩小出来的Logo糊成一团，重新渲染的则保留笔画。SVG在渲染前会先做清理：去掉脚本、事件处理器和任何指向外部服务器的引用，做法和本站的“SVG转PNG”一样。位图原图先处理成正方形，再用Lanczos滤镜重采样，在缩小图稿的常用方法里，它的结果最清晰。
Logo留在你的设备上
解码、缩放、PNG编码、ICO容器和ZIP都在这个浏览器标签页里生成。文件不上传，这对还没发布的品牌标志很重要。大多数在线favicon生成器会先把你的Logo复制到它们的服务器上，然后才给你结果。
常见问题
图标套装包含哪些尺寸？
PNG文件有16、32、180、192和512像素，另有一个favicon.ico，里面放了16、32和48三种尺寸。48像素的版本只在ICO里，Windows用它显示较大的快捷方式图标；它不单独作为PNG提供，因为网页上没有什么会请求它。
apple-touch-icon为什么没有透明背景？
因为iOS会把主屏幕图标的透明区域显示成黑色。在这里先把它拼合到你的背景色上（保留透明时拼到白色上），图标就是你设计的样子，而不是落在一块深色方块里。只有这一个文件由工具替你做了选择。
什么是maskable图标？
Android会把应用图标裁成设备选定的形状：圆形、超椭圆、圆角方形。maskable图标（可遮罩图标）把全部内容放在中间80%的区域里，无论套用哪种形状，重要部分都不会被裁掉。打开这个选项，会多出icon-512-maskable.png，manifest里也会多一条purpose为"maskable"的记录。
一定需要manifest.json吗？
只有在你想让网站能作为渐进式网页应用安装，或者想控制Android上浏览器界面的颜色时才需要。它只占一个文件和一个link标签，用不到这些功能也没有坏处，所以默认包含在内，并填好你的应用名称和主题色。
可以用SVG作为原图吗？
可以，而且效果最好。每个尺寸都按自己的分辨率从矢量渲染，而不是从一张位图重采样，所以小尺寸依然清楚。SVG会先做清理：渲染前去掉脚本、事件处理器和所有外部引用。
生成的标签放在哪里？
放在页面的head元素里；PNG、ICO和manifest文件放到网站根目录，代码片段里的路径才能对上。如果从子文件夹提供这些文件，把head-snippet.html里的href值改成对应的路径。
图标为什么看起来模糊？
几乎都是因为原图太小。所有尺寸都从一张512像素的母版生成，小于约260像素的原图要拉伸才能达到这个尺寸，最大的几个尺寸就会发虚。原图至少用512×512，或者用SVG，整套图标都会清晰。小于32像素的原图会直接被拒绝，因为没有可用的细节。
Logo会上传到服务器吗？
不会。图片始终不离开你的浏览器：解码、缩放、编码、打包成ICO和压缩成ZIP都在本地完成，压缩包直接从内存交给你。
