图片工具
在线Favicon生成器
使用图片、文字或Emoji制作完整的网站图标包,预览全部尺寸,文件始终保留在本机。
图标编辑器
背景
设备图标预览
为圆形和圆角遮罩增加安全内边距。
实时预览
位置 · 安全区域辅助线
浏览器标签预览
Apple Touch Icon 在部分设备上使用不透明背景更稳定;当前仍允许透明输出。
设备图标预览
网站 Manifest
在浏览器中本地处理,你的内容不会离开此设备。
赞助链接了解更多 →
使用方法
- 选择图片、文字或Emoji作为图标来源。
- 预览时调整适配方式、位置、缩放、背景、内边距和圆角。
- 生成图标包后,可逐个下载、复制HTML或下载ZIP。
适用场景
- 网站浏览器标签页
- Apple Touch Icon
- Android 与可安装 PWA 图标
如何制作网站 Favicon
选择图片、简短文字或 Emoji,并把重要内容放在安全区域内。生成前先预览小尺寸,确保图标在16像素时仍然清晰可辨。
网站图标需要哪些尺寸
大多数网站使用16×16和32×32 PNG,48×48可作为桌面兼容尺寸。Apple Touch Icon使用180×180,可安装 PWA 常用192×192和512×512。
如何将 PNG 转换为 ICO
生成图标包后使用其中真实的 favicon.ico。它是包含16×16、32×32和48×48透明 PNG 图像的 ICO 容器,并不是简单修改扩展名。
favicon.ico 是什么
favicon.ico 是一种兼容性图标文件,可以包含多种分辨率,浏览器会为标签页、书签或旧系统选择合适的尺寸。
如何将 Favicon 添加到网站
把生成的文件上传到网站根目录,并将 HTML 代码放入文档的 <head> 中。如需 Android 或 PWA 安装信息,请同时引用 manifest。
Apple Touch Icon 是什么
Apple Touch Icon 是访客把网站保存到 iPhone 或 iPad 主屏幕时显示的180×180 PNG。实色背景通常更稳定,但仍可生成透明图标。
PWA 可遮罩图标是什么
PWA 图标在 web manifest 中声明。可遮罩图标把重要内容放在中央安全区域,系统应用圆形或圆角遮罩时不易裁掉主体。
上传的图片是否会发送到服务器
不会。图片只使用浏览器 API 解码和绘制,原图、文字、Emoji、生成文件和 manifest 都保留在本机。
使用提示
图标使用浏览器 Canvas 和本机字体生成。不同操作系统的Emoji外观可能略有不同,较旧浏览器也许不支持所有图片编码格式。
常见问题
网站图标需要多大尺寸?
图标包包含16、32、48像素浏览器图标,180像素 Apple Touch Icon,以及192和512像素 Android/PWA图标。
现在还需要 favicon.ico 吗?
它仍然是很有用的兼容性备用格式。本工具会生成包含16×16、32×32和48×48 PNG图像的真实ICO容器。
可以从 PNG 制作 Favicon 吗?
可以。PNG、JPEG、WebP和安全的SVG图片都会在本地加载并生成全部尺寸。
可以使用 Emoji 制作图标吗?
可以。输入一个Emoji字素簇,包括组合Emoji和肤色变体,当前浏览器的渲染结果会栅格化为PNG像素。
ZIP 中包含哪些文件?
ZIP包含六种PNG尺寸、favicon.ico、site.webmanifest和中英文安装说明,不会包含原始图片。
如何把 Favicon 安装到网站?
将文件上传到网站根目录,并把生成的 link 标签放入HTML的 head 中。
上传的图片会发送到服务器吗?
不会。图片、文字和Emoji完全在浏览器中解码和渲染,不会发送到服务器。
为什么 Favicon 看起来模糊?
请使用高对比度的简单图形,把重要内容放在安全区域内,并尽量上传至少512×512像素的图片。