Favicon 生成器 — 在线制作 favicon.ico 和 PNG 图标
在浏览器中生成 favicon.ico、多尺寸 PNG 图标、manifest 和 HTML 代码
在浏览器中处理 · 不上传任何内容
一两个字符最清晰，最多可输入 4 个。
会写入 site.webmanifest 的 name。
这是什么工具
Favicon 就是显示在浏览器标签页、书签和手机主屏幕上的小图标。这个工具可以把 Logo 图片、几个字母或一个表情符号，一次做成所需的各种尺寸，并附上配套的 HTML 标签和网页应用清单（manifest）。图片只在你的浏览器里处理。
使用方法
- 在 制作方式 中选择。选 文字或表情符号 可以设置文字、字体和背景；选 图片 则使用你的 Logo 文件。
- 使用图片时，先决定 如何变成正方形（裁切中间或留出边距），以及是否开启 透明背景。再选择 形状：方形、圆角方形或圆形。
- 按需填写 网站名称、简称 和 主题色，它们会写入 site.webmanifest 和 HTML 代码。
- 检查各个尺寸的预览，可以逐个下载，也可以点击 全部下载（ZIP）。
- 把文件上传到网站根目录，再把 放进 HTML
<head>的代码 粘贴到 head 中。
生成的文件与规则
| 文件 | 尺寸 | 用途 |
|---|---|---|
| favicon.ico | 16、32、48 | 浏览器默认图标、旧环境 |
| favicon-16x16.png、favicon-32x32.png | 16、32 | 浏览器标签页 |
| favicon-48x48.png | 48 | 桌面快捷方式 |
| apple-touch-icon.png | 180 | iOS 主屏幕（铺满边角的不透明方形） |
| android-chrome-192x192.png、android-chrome-512x512.png | 192、512 | Android、PWA |
| android-chrome-maskable-512x512.png（可选） | 512 | Android 自适应图标：图案放在中央安全区，背景铺满 |
- 母版图像：先绘制一张 512 px 的正方形，其余尺寸都从它生成。缩小到小尺寸时会逐级减半，边缘比一次性大幅缩小更干净。
- ICO 结构：6 字节的文件头，每张图片一个 16 字节的目录项，后面接 PNG 数据。
- 文字排版：文字宽度控制在图块的约 78% 以内，字号控制在 72% 以内。
- 文字颜色：会根据背景自动选择易读的黑色或白色，你也可以自行修改。
代码示例
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">常见问题
我的图片会被上传吗？
不会。缩放图片和打包 ICO 文件都在你的浏览器里完成，生成的文件只会下载到你的设备上。
会生成哪些文件？
favicon-16x16.png、favicon-32x32.png、favicon-48x48.png、apple-touch-icon.png（180）、android-chrome-192x192.png、android-chrome-512x512.png，以及包含 16、32、48 三种尺寸的 favicon.ico。另外还附带 site.webmanifest 和 HTML 链接代码，所有文件都可以打包成一个 ZIP 下载。
favicon.ico 里面是什么？
16、32、48 像素的三张图片，以 PNG 数据流的形式存放在 ICO 容器中。这种结构当前的浏览器和 Vista 以后的 Windows 都能读取。ICO 的文件头和目录由本工具直接写入，并通过测试检查魔数（00 00 01 00）和条目数量。
图片不是正方形怎么办？
Favicon 是正方形的，所以默认会从中间裁出最大的正方形。如果裁切会破坏你的 Logo，请选择“保留完整图片，留出边距”，这样会保持原比例，多出来的部分保持透明。
用文字或表情符号时要注意什么？
在 16 像素下，只有一两个大字符还能看清。表情符号在各个平台上的样子不同，图标会使用你的设备绘制出的那个图案。字体来自你的设备，所以部分字符在不同电脑上看起来可能略有差别。
文件应该放在哪里？
上传到网站根目录，再把链接代码粘贴到 HTML 的 head 里。如果放在其他文件夹，请修改代码中的路径。浏览器会把 favicon 缓存很久，改动没有马上显示时请清除缓存。
