免费 Favicon 生成器

这款免费 favicon 生成器可将一张 JPG、PNG、WebP 或 SVG 图片转成 favicon.ico、Apple touch 图标，以及 16×16 到 512×512 的 PNG 图标。你的图片始终留在你的设备上。

将图片拖放到此处

或点击浏览。支持 JPG、PNG、WebP 或 SVG

选择图片

谁在使用 Favicon 生成器

任何正在上线网站、需要完整 favicon 套件的开发者或设计师。

网站上线

在上线前添加 favicon。上传你的 Logo，把文件放到网站根目录，再把 HTML 代码片段粘贴到每个页面的 head 中。

用于浏览器标签页和书签的 favicon.ico
七个可直接粘贴到页面 head 的 link 标签
代码片段中的文件路径与 ZIP 中的文件名一致

PWA 和应用图标

获取 web app 所需的图标尺寸。把 icon-192x192.png 和 icon-512x512.png 加到你的 manifest 中，apple-touch-icon.png 则用于 iPhone 主屏幕。

用于 web app manifest 的 192 和 512 像素 PNG
用于 iOS 主屏幕的 180×180 Apple touch 图标
用作网站图标的 512×512 PNG

品牌焕新

换了新 Logo？用新文件生成一套新的 favicon，并替换旧文件。文件名保持不变，所以你网站上现有的标签仍然有效。

用更新后的 SVG Logo 重新生成所有尺寸
用同名的新 favicon.ico 直接替换
试试在新标志后面使用白色、黑色或透明背景

这款 favicon 生成器能生成什么

上传一张图片，得到一个 favicons.zip：包含 favicon.ico、7 种尺寸的 PNG 和一段 HTML 代码片段。先选择透明或纯色背景即可。

一张图片生成 favicon.ico 和 PNG

上传一个 Logo，即可得到内含 16、32 和 48 px 尺寸的 favicon.ico，外加七个 16×16 到 512×512 的 PNG 文件。所有文件都会打包进一个 favicons.zip。

favicon.ico 包含 16、32 和 48 px 三种尺寸
7 个 PNG 图标，尺寸从 16×16 到 512×512
9 个文件打包保存在一个 favicons.zip 中

立即试用

透明或纯色 favicon 背景

可以保持背景透明，也可以填充白色、黑色、蓝色、红色或绿色。非正方形的 Logo 会居中并适配到正方形内，绝不裁剪。

默认透明背景
可选五种纯色背景
宽幅 Logo 居中显示，不会被裁剪

立即试用

Apple touch 和 PWA 图标

ZIP 中包含用于 iPhone 和 iPad 主屏幕的 180×180 apple-touch-icon.png，以及用于 Android 和 web app manifest 的 icon-192x192.png 和 icon-512x512.png。

可直接复制的 HTML 代码片段

点击“复制 HTML”，即可获取放在页面 head 中的七个 link 标签。同样的标签也以 snippet.html 保存在 ZIP 中，并指向网站根目录下的文件。

同样支持 SVG Logo

可以上传 SVG Logo，也可以上传 PNG、JPG 或 WebP 文件。想获得最清晰的 512×512 图标，请使用宽度至少 512 像素的正方形图片，或设置了宽度和高度的 SVG。

免费、无需注册、无水印

想生成多少套 favicon 都可以，无需账号，没有水印，也没有每日限制。你的 Logo 在浏览器中完成缩放，图片不会发送给我们。

三步生成 Favicon

上传你的 Logo。

把一个 JPG、PNG、WebP 或 SVG 文件拖到上传框中，或点击选择文件。宽度至少 512 像素的正方形图片效果最清晰。

查看预览。

所有尺寸会同时生成。你可以按实际大小查看 16、32、48、96 和 180 px 的图标，然后选择透明或纯色背景。

下载 ZIP。

点击“下载 ZIP”保存 favicons.zip。把文件放到网站根目录，再把 HTML 代码片段粘贴到页面的 head 中。

常见问题

关于 favicon 尺寸、文件格式、背景，以及如何为网站添加图标的解答。

如何用图片制作 favicon？

在本页上传 JPG、PNG、WebP 或 SVG，favicon 生成器会立即生成所有尺寸。如果需要，可以选择一种背景色，然后点击“下载 ZIP”。你会在一个文件中得到 favicon.ico、七个 PNG 图标和一段 HTML 代码片段。

favicon 应该是什么尺寸？

大多数网站需要用于浏览器标签页的 16×16 和 32×32、用于苹果设备的 180×180，以及用于 Android 和 web app 的 192×192 和 512×512。本工具会生成以上所有尺寸，另外增加 48×48 和 96×96，并把 16、32 和 48 打包进 favicon.ico。

还需要 favicon.ico 吗？

严格来说不是必需的，因为现在的浏览器会显示 link 标签指向的 PNG favicon。不过许多浏览器和应用仍会默认从网站根目录请求 /favicon.ico，所以保留一个可以避免日志中出现图标缺失的错误。ZIP 中包含内含 16、32 和 48 px 尺寸的 favicon.ico。

可以用 PNG 文件作为 favicon 吗？

可以。当页面通过 rel="icon" 标签链接到 PNG 时，浏览器就会显示该 PNG favicon。ZIP 中包含 16、32、48、96、180、192 和 512 像素的 PNG，代码片段链接了其中六个以及 favicon.ico，所以你可以直接粘贴使用。

如何给我的网站添加 favicon？

将 favicons.zip 解压到网站根目录，与首页放在同一级。然后把 snippet.html 中的标签粘贴到每个页面的 head 部分。这些标签使用 /favicon.ico 之类的路径，所以文件必须放在根目录，不能放在子文件夹里。

苹果设备需要单独的 favicon 吗？

需要。当有人把你的网站添加到主屏幕时，iPhone 和 iPad 会使用 apple-touch-icon.png，这是一个 180×180 的图标。本生成器会把该文件放进 ZIP，并且代码片段通过 rel="apple-touch-icon" 链接它，Safari 就能找到。

可以用 SVG 制作 favicon 吗？

可以，前提是 SVG 设置了宽度和高度。把它拖到页面上，就会生成 favicon.ico 和所有尺寸的 PNG。只有 viewBox 的 SVG 可能显示为空白或被压扁，所以请先设置好尺寸。SVG 内链接的字体和图片可能无法加载，因此请把文字转换为路径。

如何制作无背景的 favicon？

将背景保持为“透明”，这是默认设置。带透明背景的 PNG 或 SVG 在每种尺寸中都会保留透明效果。JPG 不支持透明，所以它自带的背景会保留；请先用背景移除工具去掉背景，再将结果保存为 PNG。

如果我的 Logo 不是正方形会怎样？

整个 Logo 会按比例缩放到正方形内并居中，不会被裁掉，也不会被拉伸。顶部和底部或两侧的空白区域会保持透明，或者填充你选择的背景色。如果想让图像填满正方形，请先用图片裁剪工具裁剪 Logo。

会为 PWA 生成 web manifest 吗？

不会。ZIP 中包含 manifest 会用到的 icon-192x192.png 和 icon-512x512.png 文件，但没有 site.webmanifest 文件。请把这两个文件加入你自己 manifest 的 icons 列表，尺寸分别填 192x192 和 512x512，类型填 image/png。