跳到正文

生成网站 favicon 图标

用图片、文字或 emoji 生成 favicon.ico、PNG 图标、Apple touch icon 和 web manifest,全程在浏览器中完成。

16px
32px
48px
64px
iPhone 主屏幕apple-touch-icon.png · 180 × 180,iOS 会自动处理圆角网站
Android(maskable)请将 logo 保持在虚线安全区内
Web 应用信息
#

文件上传的位置,例如 / 或 /icons/

将以下代码添加到 HTML 的 <head> 中
site.webmanifest
在浏览器中运行 · 无需上传工作原理

Favicon 生成器 使用方法

  1. 1

    选择来源

    上传不超过 25 MB 的 Logo 或图片,或输入一到三个字母并从 11 种字体中任选一种,也可以选择一个表情符号。

  2. 2

    设计图标

    从 12 种形状选项中选择,包括无形状、方形,以及饼干形、四叶草形等;还可以设置背景颜色或透明、内边距和圆角半径。

  3. 3

    检查各种尺寸

    预览 16 到 192 像素的图标效果,查看浅色和深色浏览器标签页中的显示,以及 Android 可遮罩图标的安全区。

  4. 4

    下载并安装

    保存 favicon.zip,解压到网站文件夹,再把生成的 HTML 代码粘贴到页面的 head 中。

限制与 Pro

用文本或表情符号生成图标套装不限次数;图片来源最大 25 MB,一次处理一张。每套包含 10 个文件。

Pro 将 Logo 图片的上传限制提高到 4 GB。 了解 Pro

关于 Favicon 生成器

Favicon 生成器可以根据一个设计,生成现代网站所需的全套图标。ZIP 压缩包中包含:内含 16、32、48 像素图像的 favicon.ico;16、32、48 像素的独立 PNG;背景不透明的 180 像素 apple-touch-icon(iOS 会自动添加圆角);192 和 512 像素的 Android Chrome 图标;内容保持在 80% 安全区内的 512 像素可遮罩图标;包含应用名称、简称和主题色的 site.webmanifest;以及带有 link 和 theme-color 标签、可直接粘贴的 HTML 代码。所有 PNG 都经过无损优化。

上传的图片使用 Lanczos 滤波缩小,所以即使缩到 16 像素,大尺寸 Logo 依然清晰;SVG Logo 会先按 1,024 像素绘制。文本图标使用你选择的字体渲染,表情符号使用 Noto Color Emoji 字体,因此在每位访问者的系统上看起来都一样。如果图标不放在网站根目录,可以填写文件夹,例如 /icons/,HTML 代码和 manifest 中的路径会随之更新。

常见用途包括:新网站或博客、用户会安装到主屏幕的 Web 应用、需要在众多浏览器标签页中脱颖而出的内部看板,或是个人项目的临时图标。细节和较长的文字在 16 像素下会看不清,所以简单的形状和一两个字母效果最好。本工具不托管文件,也不会修改你的网站,文件需要你自己上传。

隐私

图标在本标签页的画布上绘制,并由本站在 Web Worker 中运行的 WebAssembly PNG 编码器编码,所以上传的 Logo 不会离开你的设备。如果你选择了某种 Google 字体或表情符号来源,开始编辑后浏览器会从 Google Fonts 下载该字体一次;请求中只包含字体名称,不包含你的文本,页面加载时也不会请求任何内容。

功能

完整图标套装

ICO、各种 PNG 尺寸、Apple touch icon、Android 和可遮罩图标以及 web manifest,全部打包在一个 ZIP 中。

图片、文本或表情符号

可以用你的 Logo、11 种字体的一到三个字母,或任意表情符号作为来源。

丰富的形状

方形、圆角、圆形和八种 Material 形状,并可调整内边距和圆角半径。

可直接粘贴的 HTML

link 标签、主题色和 manifest 路径会根据你选择的文件夹生成。

Favicon 生成器:常见问题

2026 年网站图标需要哪些尺寸?
浏览器在标签页中使用 16 或 32 像素图标,部分搜索结果页使用 48 像素图标;iPhone 和 iPad 在主屏幕上使用 180 像素的 apple-touch-icon;Android 通过 web manifest 使用 192 和 512 像素图标。下载包涵盖所有这些尺寸,另有多尺寸 favicon.ico,供旧版浏览器和自动请求 /favicon.ico 的工具使用。
如何把 favicon 添加到我的网站?
把 favicon.zip 解压到网站根目录对应的文件夹,使 favicon.ico 能通过 /favicon.ico 访问,或解压到你在“图标文件夹”中填写的文件夹。再把工具中的 HTML 代码(或 ZIP 里的 favicon-snippet.html)复制到每个页面的 head 中,或主题的头部模板中。浏览器会长时间缓存 favicon,可能需要强制刷新才能看到变化。
可以用表情符号或字母制作 favicon 吗?
可以。选择“表情符号”,从 24 个推荐中挑一个或输入任意表情符号;也可以选择“文本”,输入最多三个字符(例如你的姓名首字母),并选用 Inter、Bebas Neue 或 Press Start 2P 等字体。还可以搭配形状和背景颜色。表情符号使用 Noto Color Emoji 字体绘制,所以在 Windows、Mac、Android 和 iPhone 上看起来完全一致。
什么是可遮罩图标?
Android 会按手机厂商选定的形状显示已安装的 Web 应用,例如圆形、圆角方形或水滴形,并裁剪图标以适应。可遮罩图标会铺满整个方形,并把重要内容保持在中央 80% 的圆形范围内,避免被裁掉。在预览中打开“安全区”即可看到这个圆形;如果 Logo 太靠近边缘,可以调整“内边距”。
还需要 favicon.ico 吗,只用 PNG 够不够?
现代浏览器可以直接使用 link 标签中的 PNG 图标,但 favicon.ico 仍然值得保留:部分浏览器、RSS 阅读器、书签工具和爬虫不会读取你的 HTML,而是直接请求 /favicon.ico。生成的 ICO 在一个文件中包含 16、32 和 48 像素的图像,在各种使用场景下都很清晰。下载包同时包含两者,HTML 代码也同时引用两者。
全部图片工具