Favicon 生成器

示例

icon.png（页面生成，512×512 红色圆角方块与字母 D）· 应用名称 Dayeku Demo · 主题色 #a01e2b

favicon.zip：favicon.ico（16 / 32 / 48）、favicon-16x16.png、favicon-32x32.png、apple-touch-icon.png、android-chrome-192x192.png、android-chrome-512x512.png、site.webmanifest

把这些文件放到网站根目录，再把生成的 HTML 代码粘贴到每个页面的 <head> 中即可。文件名与代码中的路径一一对应。

技术细节与边界

每个尺寸都从原图单独缩放（缩小超过 2 倍时逐级减半），按边距等比放进正方形。favicon.ico 由页面自行组装：6 字节文件头、每个尺寸 16 字节目录项，图像以 32 位 PNG 形式嵌入，Windows Vista 起及现代浏览器都支持。180×180 的 Apple 图标始终填充背景色且不裁圆角，因为部分 iOS 版本会把透明区域显示为黑色，并会自行添加圆角遮罩。manifest 只写入 192 与 512 两个尺寸。

关于此工具

用一张 PNG、JPG、WebP 或 SVG 图片生成网站图标全套文件：包含 16、32、48 像素的 favicon.ico，16 / 32 像素 PNG，180 像素 apple-touch-icon，192 和 512 像素的 PWA 图标，site.webmanifest，以及可直接粘贴到 <head> 的 HTML 代码；SVG 源文件还会附带 favicon.svg。可设置边距、圆角、背景色、应用名称和主题色，打包为 ZIP 下载，图片不上传。

操作步骤

1. 拖入、点击选择或粘贴一张图片，推荐正方形、至少 512×512 的 PNG 或 SVG。
2. 按需调整边距、圆角、背景色，并填写应用名称和主题色。
3. 下载 ZIP，把文件放到网站根目录，并复制 HTML 代码到 <head>。

输入 / 输出说明

输入

一张 JPEG、PNG、WebP、AVIF、BMP、GIF 或 SVG 图片，不超过 50 MB；非正方形图片会等比放入并留白。

输出

ZIP 包内含 favicon.ico、5 个 PNG、site.webmanifest（SVG 源时另含 favicon.svg），以及 HTML 代码。

限制

不生成 Windows 磁贴、Safari 固定标签页单色图标等旧式文件；不检查线上网站当前使用的图标。

注意事项

16×16 只有 256 个像素，细节和小字会难以辨认，建议使用简洁、高对比度的图形。浏览器会缓存 favicon，替换后可能需要强制刷新才能看到。

常见问题

网站 favicon 需要准备哪些尺寸？

通常需要：含 16、32、48 像素的 ICO，180 像素 Apple 图标，192 与 512 像素 PWA 图标。这里一次生成全部文件和 HTML 代码，SVG 源图另附矢量版。

生成的 favicon.ico 里包含哪些尺寸？

包含 16×16、32×32、48×48 三个尺寸，都以带透明通道的 32 位 PNG 嵌入。结构为 6 字节文件头加每个尺寸 16 字节目录项，Windows Vista 起及现代浏览器都能识别。

为什么 iPhone 主屏幕图标出现黑色背景？

部分 iOS 版本会把 Apple 图标的透明区域显示为黑色。本页 180×180 图标始终用背景色填满且不裁圆角，iOS 会自行加圆角遮罩；默认背景为白色 #ffffff，可改为品牌色。

相关工具

• 图片尺寸调整 按宽高、百分比或最长边批量缩放图片，可裁剪填满或留白，不上传
• 图片 Base64 互转 图片转 Base64、Data URI、CSS 或 HTML 代码，也可把 Base64 还原成图片下载