Favicon 生成器

用字母、表情或图片创建网站图标：多尺寸 favicon.ico、16–512 px 的 PNG、Apple 触控图标、web manifest 以及 HTML link 标签，全部在浏览器中完成。

来源

字母或表情

最多 3 个字符，例如“A”“AK”或“🚀”。

形状

背景色

文字颜色

应用名称（用于 manifest）

什么是 Favicon 生成器？

用 字母或表情（可自定义颜色和形状）或图片为你的网站生成一整套 favicon。你会得到多尺寸的 favicon.ico（16、32 和 48 px）、尺寸为 16、32、48、180（Apple 触控图标）、192 和 512 px 的 PNG 图标、一个 site.webmanifest，以及可粘贴到 <head> 中的 HTML <link> 标签。

如何使用 Favicon 生成器

选择来源：文字或表情 或图片（正方形图片效果最好）。
设置形状、背景色 和 文字颜色，以及用于 manifest 的 应用名称（用于 manifest）。
点击 下载 favicon.ico，并从预览中下载你需要的 PNG 文件。
复制 放入 <head> 的 HTML 和 site.webmanifest，并把所有文件放到网站的根目录。

示例

输入

Text "A", Rounded, Background #4f46e5

输出

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

另外还有 favicon.ico（16、32、48 px）和六个 PNG 文件。

何时使用 Favicon 生成器

适合新网站、个人项目、内部工具和文档站点。如果你的标志很精细，请为 16 和 32 px 设计简化版本，因为细节在这些尺寸下会消失。如果想要适应深色模式的清晰图标，请另外提供 SVG favicon。

Favicon 生成器的工作原理

每个尺寸都在单独的 canvas 上绘制：形状用背景色填充，最多三个字符居中并缩放到图标大小；图片则居中裁剪为正方形，并以高质量平滑缩放。每个 canvas 都导出为 PNG。.ico 文件逐字节组装：6 字节的 ICONDIR 头、每个尺寸一个 16 字节的目录项（宽度、高度、32 bpp、数据大小和偏移量），其后嵌入 PNG 图像——这是所有现代浏览器以及 Windows Vista 及更高版本都支持的 PNG-in-ICO 格式。180 px 的 Apple 触控图标始终是不透明的正方形，因为 iOS 会自己处理圆角。