Favicon 生成器，免费
上传图片，生成所有标准尺寸的 PNG favicon。
将图片拖放到此处，或点击选择
方形图片效果最佳（PNG、JPG、SVG）
Favicon 尺寸说明
16×16· 标准浏览器标签页 favicon
32×32· Retina 标签页、任务栏快捷方式
48×48· Windows 网站快捷方式
180×180· Apple Touch Icon（iOS 主屏幕）
192×192· Android Chrome、PWA manifest 图标
512×512· PWA 启动画面、Google 搜索
Favicon 简史
Favicon 起源于微软在 1999 年 3 月发布的 Internet Explorer 5。微软引入了在站点根目录寻找 /favicon.ico 并在「收藏夹」栏的书签站点旁显示该图标的惯例，名字「favicon」（favorite icon）由此而来。最初的选择是微软专有的 Windows ICO 格式，可以在单个文件中容纳多种位图尺寸。其他浏览器几乎立刻采纳了这一惯例，并开始支持 PNG favicon，通过文档头中的 <link rel="icon"> 标签来声明。苹果 iPhone（2007 年发布）增加了 apple-touch-icon 惯例，用户将网站添加到 iOS 主屏幕时使用的180×180 PNG，显示尺寸与原生应用图标相同。渐进式 Web 应用（PWA，2015 年前后正式化）添加了 manifest.json 文件及其 icons 数组，要求 192×192（Chrome 安装提示）和 512×512（PWA 启动屏、Android 主屏幕、Windows 开始菜单固定）的 PNG 变体。SVG favicon（Firefox 自 2015 年的 41 版起、Chrome 自 2020 年 2 月的 80 版起、Safari 自 2019 年的 12.1 版起支持）如今是图标为简单形状时的现代推荐，单个文件可完美适配任何显示密度。传统的 favicon.ico 文件对 Internet Explorer 11 及更早的浏览器仍然必要；现代技术栈交付 SVG 加上 ICO 回退和 apple-touch-icon PNG。
为什么有这么多尺寸？
favicon 集中每个尺寸服务于不同的渲染场景。16×16 是标准 DPI 下经典的浏览器选项卡 favicon，教会设计师像素约束有多残酷的尺寸。32×32 是高 DPI（Retina）选项卡尺寸；许多现代浏览器即便对「标准」显示器也偏好它，因为它向下缩放比 16×16 向上放大效果更好。48×48 是 Windows 用于任务栏快捷方式和已固定站点 favicon 的尺寸。180×180 是 apple-touch-icon，在用户将站点添加到 iOS 主屏幕时显示。192×192 是 Chrome 的 Web 应用安装提示和 Android 主屏幕标准图标。512×512 是 PWA 启动屏图标、Google 搜索结果缩略图和 Windows 开始菜单磁贴图标。单个高分辨率文件不够用的原因：在最小尺寸下，图标通常需要手动调整简化才能保持可读（16×16 下的复杂 logo 会变成色块），所以专业的 favicon 设计通常需要绘制两到三个变体，用于大尺寸的详细版、用于中等尺寸的简化版、以及用于最小尺寸的「仅徽标」版本。本生成器通过标准的最近邻或双线性下采样缩放单一源文件，对简单形状效果良好；复杂 logo 在最小尺寸下可能需要手动修饰。
与文件配套的 HTML
生成文件只完成了一半的工作；另一半是放在 <head> 中的元标签，告诉浏览器在哪个场景使用哪个文件。2026 年最低可用的 favicon 技术栈：
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<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">浏览器根据设备的像素密度和它支持的格式选择最合适的文件。现代浏览器在 SVG 存在时优先选用；旧浏览器回退到 PNG 尺寸；iOS 使用 apple-touch-icon；PWA 安装读取清单。即便没有显式的 link 标签，根目录下的 favicon.ico 仍会被自动作为默认回退获取，每个站点都应保留一个，以与非常老的浏览器和工具保持向后兼容。
你真正需要生成 favicon 的场景
- 新站点上线。每个新网站都需要一套 favicon。2026 年的预期是多种尺寸的完整 PNG 栈加上一个 SVG 加上一个 ICO，总共六到十个文件。从单一来源生成它们正是本工具的全部目的。
- 品牌升级。logo 更新意味着新的 favicon。替换源图像并重新生成比在矢量编辑器中逐个尺寸重做更快。
- PWA 转换。给现有站点增加 PWA 能力，需要在现有 favicon 集之外再准备清单图标（至少 192×192 和 512×512）。许多站点在 PWA 工作中才发现自己现有的 favicon 集已经过时且不完整。
- 快速原型或内部工具。即便是原型站点也会因有可识别的选项卡图标而受益，未做品牌的选项卡在繁忙的浏览器中很难找到。丢一张占位图片进去，得到一整套。
- 多环境品牌化。生产、预发布和开发站点用视觉上有区分的 favicon（不同颜色，或叠加「DEV」/「STG」字样）能让开发者在同时打开多个标签时分辨哪个是哪个。每个环境生成一个图标。
为 16×16 约束而设计
16×16 favicon 是现代界面设计中最苛刻的约束。256 个像素（整个图标画布）必须传达足够的品牌识别度，让用户能在二十个其他选项卡中找到你的。来自做过很多次的设计师的实用建议：大胆地简化。16×16 下的复杂 logo 是色块。剥去细节直到只剩最少的可识别形状。最大化与选项卡背景的对比度。浏览器选项卡通常是浅灰或深灰；对比度弱的图标会消失在浏览器框架里。偏好单一粗壮的形状而非细线条。宽度小于 2 像素的线条在 16 像素下会被消除走样为灰色而变得不可见。在你的浏览器中按实际尺寸测试。在 256×256 设计工具里看着不错的，到 16×16 可能完全不可读。打开你站点的多个选项卡并在选项卡栏中观察，这是真正的测试。考虑深色模式的情况。为白色选项卡栏设计的图标在深色选项卡栏上可能不可见。SVG favicon 可以在 SVG 内部包含 prefers-color-scheme 媒体查询以自动适配明暗；对于 ICO 和 PNG 回退，请设计在两种背景下都能工作的图案。
本生成器产出的内容
- favicon.ico，多尺寸 ICO（16×16 + 32×32），用于旧浏览器回退，放置在根目录
/favicon.ico。 - favicon-16x16.png，给偏好 PNG 而非 ICO 的浏览器使用的显式 16×16 PNG。
- favicon-32x32.png，高 DPI 浏览器选项卡图标。
- apple-touch-icon.png，iOS 主屏幕书签的 180×180。必须不透明（无透明度）才能在 iOS 中正确渲染。
- icon-192.png，Android Chrome 的 Web 应用安装提示和 PWA 主屏幕图标。
- icon-512.png，PWA 启动屏、Google 搜索结果、Windows 开始菜单固定。
隐私：图像处理仅在浏览器内
你为生成 favicon 而上传的 logo 或品牌图像可能是机密的，上线前的品牌工作、内部工具的品牌、受 NDA 保护的客户 logo。服务端 favicon 生成器（非常流行的 RealFaviconGenerator 等）会将每张上传图像的副本带入它们的基础设施，在那里它会停留在日志和缓存中。本生成器完全在你的浏览器中通过 Canvas API 运行：图像被读入浏览器，由浏览器内置的图像缩放管线缩放到每个 favicon 尺寸，然后打包供下载，一切都在你的标签页内完成。上传时打开 DevTools 的网络面板验证（页面加载后没有任何请求触发），或在页面加载后将其离线（飞行模式），生成器仍可对本地文件继续工作。对未公开的品牌工作、受 NDA 保护的客户 logo、内部工具品牌或任何你不希望被复制到陌生人硬盘上的图像，都安全可用。