favicon生成器 – 在线制作 favicon.ico

使用方法

三步做出 favicon

从 logo 到可以上传的文件大约三分钟。请从至少 256 px 的方形图片开始，或者直接从零绘制 favicon。

01

导入您的 logo

点导入，选择 PNG、JPG、WebP 或 SVG（也可以拖到页面上），把方形裁剪框拖到想要的区域，再点导入。
02

修整 16 和 32 px 尺寸

在像素网格里打开小尺寸，去掉细节，把细线加粗。打开在 Windows 中预览，可以在浏览器标签页的模拟界面里看到效果。
03

导出 favicon.ico

点导出，只勾选 16、32、48 px，文件名填 favicon，再点下载 .ICO。“Web favicon”标签页里有可直接粘贴的标签。

有哪些文件

favicon.ico、Apple touch icon、PNG 和 SVG

每个文件有什么用，以及其中哪些由 IconEditor 为您生成。

文件	用途	IconEditor 能生成吗？
`favicon.ico`（16、32、48 px）	所有桌面浏览器、书签，以及不读您 HTML 就直接请求 `/favicon.ico` 的工具	能。导出时勾选 16、32、48 px。
16 / 32 / 48 px 的 PNG	显式的 `<link rel="icon" type="image/png" sizes="32x32">` 标签	能。点下载 PNG得到单个尺寸，或下载所有已勾选尺寸的 ZIP。
`apple-touch-icon.png`（180 px）	iPhone 和 iPad 主屏幕	部分能。导出 256 px 的 PNG，再用图片工具缩到 180 px；编辑器里没有 180 px 的槽位。
192 和 512 px 的 PNG	Android、PWA、Web 应用 manifest	不能。最大尺寸是 256 px。请用图片工具把您的原始素材缩放到 192 和 512 px。
`icon.svg`	现代浏览器；可任意缩放	不能。IconEditor 不输出 SVG。如果您的 logo 本来就是 SVG，直接把它连同 .ico 一起上传即可。
`manifest.webmanifest`	可安装 Web 应用的名称和图标	不能。这个文件需要自己手写（起步只要三行）。

对一般网站——博客、网店、公司主页——来说，.ico 加一个 Apple touch icon 就够了。只有用户会把您的网站“安装”成应用时，才需要更大的 PNG。

放进您的网站

要复制的 <link> 标签

把文件上传到网站根目录，然后把标签加到 <head> 里。

导出对话框里的代码片段标签页：C/C++ .rc、.NET .csproj、Electron、Tauri 和 Web favicon — 导出对话框的 **Web favicon** 标签页就是下面的第一段代码。

最简方案：只放 .ico

<link rel="icon" href="/favicon.ico" sizes="any">

这正是导出对话框“Web favicon”标签页里的代码。没有标签时，浏览器也会自己请求 /favicon.ico，所以放在网站根目录的文件即使没有标签也能生效。

推荐方案：ico + SVG + Apple touch icon

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

如果同时提供 SVG 图标，请在 .ico 的 link 上写 sizes="32x32"：否则 Chrome 可能会优先采用 .ico 而不是 SVG。没有 SVG 或 manifest 文件的话，对应的几行请省略。

Google 搜索看重什么

Google 会在手机和桌面搜索结果里把您的 favicon 显示在结果旁边。它的指南要求：图片是正方形，边长为 48 px 的整数倍（.ico 里的 48 px 条目符合）；整个网站使用同一个 favicon；网址稳定；Googlebot 可以抓取该页面，并且文件没有被 robots.txt 屏蔽。修改之后，请等几天到几周，结果里才会更新。

设计

16 像素下依然看得清的 favicon

整个图标大约只有一个小写字母那么高。

预览会在“开始”菜单和浏览器标签页里显示 32 和 16 px 条目。

一个形状，一两种颜色

用名称的首字母，或 logo 里最简单的那一部分。200 px 下看得清的文字标志，到 16 px 就是一团模糊。

亲手修整 16 px 版本

自动缩小会把一像素的线条弄糊。在像素网格里，这 256 个像素都可以自己安排；花五分钟，效果一眼可见。

同时看浅色和深色标签页

浏览器会把 favicon 放在浅色和深色两种背景上。请两种都预览一下，在透明背景上避免使用纯黑或纯白填充。

有意识地决定是否透明

透明的 favicon 会融进标签页；带颜色的圆角方块则在任何主题下都清晰可见。用画布下方的背景和圆角来选择。

原则和 Windows 应用图标是相通的，所以同一个文件可以两用。图标设计教程和尺寸速查表讲得更深入。

常见问题

favicon 问答

更多解答见完整的常见问题。

什么是 favicon？

favicon 是浏览器在标签页标题旁、书签和历史记录里显示的小图标；Google 等搜索引擎在手机搜索结果里也会把它显示在您的网站旁边。名字来自 “favorite icon”。从技术上说它是一张小图片——传统上是放在网站根目录的多尺寸 favicon.ico，如今通常还会配一个 SVG 和给手机用的 PNG。

favicon 需要哪些尺寸？

一个包含 16、32、48 px 的 favicon.ico 就能覆盖所有桌面浏览器，也满足 Google“尺寸须为 48 px 的整数倍”的要求。再加一个 180 × 180 px 的 apple-touch-icon 给 iOS 主屏幕用；如果是 Web 应用，还需要在 manifest 里提供 192 和 512 px 的 PNG。IconEditor 能生成 .ico 以及它的七个尺寸（最大 256 px）的 PNG；180、192、512 px 的文件需要用图片工具另行制作。

这个生成器能生成完整的 favicon 套件吗？

不能，我们实话实说。它生成 favicon.ico，并提供 16、24、32、48、64、128、256 px 的 PNG，以及 <link> 代码片段；不生成 180、192、512 px 的文件，也不生成 web manifest 或 browserconfig 文件。对大多数网站来说，.ico 加一个 apple-touch-icon 就够了；需要整套文件时，可以在这里设计图标，再用套件生成器去裁尺寸。

favicon 该用 ICO、PNG 还是 SVG？

三种都可以。.ico 是所有浏览器和许多工具仍会自动请求的 /favicon.ico，所以一定要放。SVG 可以任意缩放、还能跟随深色模式，但老浏览器不认。PNG 则是 Apple touch icon 最简单的格式。比较稳妥的常见组合是 favicon.ico + SVG + 180 px PNG。

能用 JPG 或 SVG 做 favicon 吗？

可以。JPG、PNG、WebP、GIF、BMP 和 SVG 的导入方式都一样。JPG 没有透明，所以 favicon 是一整块方形，除非您擦掉背景或设置圆角。SVG 导入时按 1024 px 栅格化再缩小，效果最干净。

上传了新的 favicon，为什么网站上没变化？

浏览器会很积极地缓存 favicon，而且往往与页面缓存无关。可以用 Ctrl+F5 强制刷新，直接打开该文件的网址再刷新，或者给新文件换个名字（例如 favicon-v2.ico）并更新 link。搜索结果可能要几天到几周才会更新。

生成器免费吗？我的图片会被保存吗？

免费，无需账号，没有水印。您的图片在我们服务器的内存里转换，随即丢弃；您的编辑进度只保存在自己的浏览器里。详见隐私政策。

继续了解

转换器 PNG 转 ICO 转换器从 PNG、JPG、SVG 或 WebP 到多尺寸 .ico 的完整流程。转换器 ICO转换器所有支持的格式，以及该勾选哪些尺寸。转换器 ICO转PNG 把现有 favicon.ico 里的各个尺寸提取成 PNG。参考 · 6 分钟 Windows 图标尺寸速查表 favicon 尺寸表，以及 Windows 的各种使用场景。

现在就做您的 favicon

编辑器会直接打开导入对话框。免费、在浏览器里完成，无需安装，文件不留存。

制作 favicon PNG 转 ICO 教程

favicon生成器：用您的 logo 做出 favicon.ico