Favicon 是代表你网站的小方形图标，出现在浏览器标签页、书签、历史记录和搜索结果中。它强化品牌形象，帮助用户在众多标签页里一眼认出你的页面。现代网站通常会提供多种尺寸，外加一个 apple-touch-icon 和 PWA 图标，让同一个 logo 在每种设备和场景下都清晰锐利。

favicon 应该用什么尺寸？

并没有单一尺寸。16x16 和 32x32 用于浏览器标签页和书签，48x48 用于 Windows 和高 DPI 标签页，180x180 用作 iOS 主屏上的 apple-touch-icon，192x192 和 512x512 用于 Android 与 PWA 安装。我们的生成器只需一次上传就会构建出全部尺寸，让每个场景都拿到像素级精确的版本。

如何把 PNG 或 JPG 转换成 ICO 格式的 favicon？

上传你的 PNG 或 JPG，生成器会将它打包成一个多分辨率的 favicon.ico，其中包含 16x16、32x32 和 48x48 的帧，同时附带独立的 PNG 图标。为获得最清晰的效果，请从至少 512x512 的方形原图开始，背景透明或纯色皆可。整个过程在你的浏览器中运行，因此转换即时完成，文件也绝不会离开你的设备。

favicon.ico 和 PNG favicon 有什么区别？

favicon.ico 是一种传统容器，把多个像素尺寸打包进一个文件，能保证老旧浏览器以及默认的 /favicon.ico 查找都能正常识别。PNG favicon 是单一尺寸，体积更小，并支持更锐利的 alpha 透明度，适合现代浏览器。最佳做法是两者都提供：用 favicon.ico 做通用兜底，再在 HTML 中声明 32x32 及更大的 PNG 以获得清晰渲染。

为什么我的 favicon 在浏览器里不显示？

浏览器会非常激进地缓存 favicon，新图标常常被旧的挡住。先做一次硬刷新（Ctrl+Shift+R 或 Cmd+Shift+R），再用无痕窗口完全绕过缓存。确认文件确实存在于 link 标签所指的路径，检查网络面板里没有 404，并确保该图标是一张有效的方形图片。

如何把 favicon 添加到 HTML 网站？

把生成的文件上传到站点根目录，然后在中加入 link 标签：、以及。生成器会给出这段现成的代码，你直接复制粘贴即可。

如何在 Next.js 应用中添加 favicon？

使用 App Router 时，直接把 favicon.ico、icon.png 和 apple-icon.png 放进 app 目录，Next.js 会自动注入正确的链接，无需手动写标签。对于 PWA 图标，在 manifest 中引用 192x192 和 512x512 的 PNG。若使用较旧的 Pages Router，则把 link 标签写进自定义的组件里。

如何在 WordPress 中添加 favicon？

进入「外观」→「自定义」→「站点身份」，在「站点图标」处上传你的图标——WordPress 建议至少 512x512，并会自动生成更小的尺寸。该设置同时也会用于 apple-touch-icon。如果主题或缓存插件覆盖了它，请清除站点缓存和浏览器缓存，再硬刷新即可看到新图标。

可以用 SVG 作为 favicon 吗？

可以。包括 Chrome、Edge、Firefox 和 Safari 在内的现代浏览器都支持用声明的 SVG favicon，它与分辨率无关，在任何尺寸下都保持锐利。由于老旧浏览器和许多平台仍会忽略 SVG，请始终搭配 favicon.ico 和 PNG 兜底，确保每位访客都能看到图标。

PWA 或 Android 需要哪些 favicon 尺寸？

渐进式 Web 应用（PWA）和 Android 主屏会从你的 Web app manifest 读取图标。至少提供一张 192x192 的 PNG 用于主屏、一张 512x512 的 PNG 用于启动屏和应用商店，并在 manifest 的 icons 数组中用正确的 sizes 和 type 声明。再加一张 maskable 的 512x512 版本，可确保你的 logo 填满自适应图标形状而不被尴尬裁切。

apple-touch-icon 是什么，我需要它吗？

apple-touch-icon 是当用户把你的网站添加到主屏时，iOS 和 iPadOS 使用的 180x180 PNG，也用于其他 Apple 场景。没有它，Safari 会退而使用一张模糊的页面截图。在中加入，并使用纯色背景，因为 iOS 在这里不会保留透明度。

如何制作深色模式的 favicon？

在图标 link 上使用 media 属性，按配色方案提供不同文件：，再加一条指向深色版本的 link。这主要适用于 SVG favicon，能让你的 logo 在浅色和深色的浏览器界面下都保持清晰可辨，例如 Safari 以及某些会给背景上色的标签主题。

这个 favicon 生成器免费吗？我的 logo 会被上传到服务器吗？

完全免费，无需注册、没有水印，也不限制生成次数。同样重要的是，每次转换都 100% 在你的浏览器中通过客户端代码运行——你的 logo 绝不会被上传或存储到任何服务器。这让它可以安全地用于机密品牌素材和未发布的产品，也正是为什么即使是大图片也能即时生成。

什么样的图片最适合做 favicon？

选一个方形、简洁、高对比度的标识，缩小到 16x16 像素时仍清晰可辨。粗壮的形状、单个字母或一个有辨识度的符号，远比细节繁复的插画或细小文字更耐看，后者在标签尺寸下会糊成一团。请从大尺寸原图（512x512 或更大）开始，保留充足留白，并在浅色和深色标签下都测试一下效果。

专业工具

免费 Favicon 生成器 — PNG/SVG 转 ICO，全尺寸一键生成

适配 Next.js、WordPress、React 及任意网站

上传一次 Logo，立即生成 favicon.ico 以及适配所有平台的图标——浏览器标签页、iOS 主屏、Android 与 PWA。全部在浏览器本地完成，无需上传。

100% 浏览器端无需上传永久免费全尺寸

上传您的 Logo

支持 PNG、JPG、SVG 格式，最大 10MB

或拖放文件到此处

打造完美 Favicon 所需的一切

一次上传即生成适配所有浏览器、设备与平台的生产级图标。

锐利的高质量缩放

在每个尺寸下对 Logo 重新采样并保持边缘清晰，从 16x16 标签页小图到 512x512 PWA 大图都干净利落。

支持 PNG、JPG 与 SVG 输入

支持上传位图或矢量源文件。SVG 可在每个生成分辨率下保持完美清晰。

一次生成所有平台尺寸

一键生成 favicon.ico（16/32/48）、apple-touch-icon 180、android-chrome 192 与 512，以及 mstile 150。

暗色模式 Favicon

提供专用的暗色 favicon，让图标在深色浏览器主题与标签栏下依旧清晰可辨。

适配 Next.js、WordPress 与 React

复制即用的 HTML 代码片段并放入文件即可，适用于任意框架、CMS 或静态站点。

100% 隐私，零上传

所有转换都在你的浏览器本地运行。Logo 绝不离开你的设备，也不会发送到任何服务器。

如何生成 Favicon

3 个简单步骤生成所有 favicon 资源。

上传 Logo

上传 PNG、JPG 或 SVG 格式的 Logo

自动生成

我们自动生成所有所需的尺寸和格式

下载使用

下载所有资源和集成代码

本工具对比

看看一体化的浏览器端生成器为何胜过单一格式工具与手动制作。

能力	本工具	仅 PNG 工具	手动制作
纯浏览器端运行
多尺寸一次出
真正的多尺寸 .ico
Apple Touch Icon
PWA / Android 图标
暗色模式支持
隐私，零上传
免费使用

是表示完全支持，否表示不支持或需手动处理。

结果基于本工具实际产出的资源以及其他工作流的常见限制。

不熟悉 favicon？各浏览器 favicon 优化指南

Favicon 尺寸及其用途

本工具生成的每个图标尺寸的完整参考。

现代网站需要多种图标尺寸，才能让品牌在各处都清晰呈现，从浏览器标签页到手机主屏。

尺寸	文件	用途
16x16	favicon.ico	浏览器标签页
32x32	favicon.ico	任务栏与书签
48x48	favicon.ico	Windows 站点图标
180x180	apple-touch-icon.png	iOS 主屏
192x192	android-chrome-192x192.png	Android 主屏
512x512	android-chrome-512x512.png	PWA 启动图与安装

favicon.ico 文件内含 16、32、48 三种尺寸，浏览器会自动选用最合适的一个。

下载包内容

一份完整、即可部署的 favicon 套件，外加用于接入的 HTML。

favicon.ico

多尺寸图标（16/32/48），用于浏览器标签页、书签与 Windows。

apple-touch-icon.png

180x180 图标，用于 iOS 与 iPadOS 主屏快捷方式。

android-chrome-192x192.png

192x192 图标，用于 Android 主屏与 PWA 安装。

android-chrome-512x512.png

512x512 高分辨率图标，用于 PWA 启动图与应用商店。

HTML 代码片段

复制粘贴即可的 link 标签，在页面 head 中引用所有图标。

如何在 HTML 中引用 favicon

把下载的文件放在网站根目录，然后在页面 head 中加入以下标签，让各浏览器都能取到正确的图标：

<link rel="icon" href="/favicon.ico" sizes="any" />
<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="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png" />
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png" />

常见问题

尺寸、格式、安装与缓存——上线一个在任何环境都能正常显示的 favicon，你需要知道的一切。