图片工具

在线Favicon生成器

使用图片、文字或Emoji制作完整的网站图标包,预览全部尺寸,文件始终保留在本机。

图标编辑器

图标来源
将图片拖到这里,或选择文件PNG、JPG/JPEG、WebP 或安全 SVG · 仅一张 · 本地处理

背景

设备图标预览

为圆形和圆角遮罩增加安全内边距。

实时预览

位置 · 安全区域辅助线

16×16 favicon preview示例网站 · 浅色标签
32×32 favicon preview示例网站 · 深色标签

浏览器标签预览

180×180 Apple Touch Icon preview
Apple Touch Icon
192×192 Android icon preview
Android / PWA
Round mask preview
圆形遮罩
Rounded mask preview
圆角遮罩

Apple Touch Icon 在部分设备上使用不透明背景更稳定;当前仍允许透明输出。

设备图标预览

16×16 favicon preview
16×16 浏览器16×16
32×32 favicon preview
32×32 浏览器32×32
48×48 favicon preview
48×48 浏览器48×48
180×180 favicon preview
180×180 Apple180×180
192×192 favicon preview
192×192 Android192×192
512×512 favicon preview
512×512 Android512×512

网站 Manifest

在浏览器中本地处理,你的内容不会离开此设备。

使用方法

  1. 选择图片、文字或Emoji作为图标来源。
  2. 预览时调整适配方式、位置、缩放、背景、内边距和圆角。
  3. 生成图标包后,可逐个下载、复制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像素的图片。

你可能还需要