Favicon 生成器
一张图片生成全套 favicon
一键导出浏览器 favicon、iOS 的 Apple Touch Icon 以及 Android/PWA 图标，并生成对应的 meta 配置，直接粘贴到项目中使用。
本地处理｜不上传生成 favicon 压缩包
上传一张图片，下载包含常见 favicon 文件的 zip，直接放到网站 public 目录即可。
建议：使用 512×512 的方形 PNG Logo 效果最佳；非方形图片会保持比例居中，不会拉伸变形。
上传或拖拽图片
支持单张最大 25 MB 的 PNG、JPG、WebP 文件，所有处理均在浏览器本地完成。
拖拽图片到此处或点击浏览
PNG, JPG, WebP
上传一张图片，下载包含常见 favicon 文件的 zip，直接放到网站 public 目录即可。
Meta 配置一键复制
下载 zip 后，选择你的技术栈，将片段粘贴到项目中即可。
<link rel="icon" href="/favicon.ico" sizes="any">
<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="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="icon" type="image/png" sizes="256x256" href="/favicon-256x256.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<!-- Windows tile config -->
<meta name="msapplication-config" content="/browserconfig.xml">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-150x150.png">
<meta name="theme-color" content="#ffffff">
<!-- Optional (Safari pinned tab): <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#23B7BF"> -->使用这个 favicon 生成器，可以从一张图片一次性生成全套 favicon。它会导出浏览器 PNG 图标、iOS 的 Apple Touch Icons、Android/PWA 图标，并额外包含 `favicon.ico` 以提升兼容性，同时附带 `site.webmanifest` 与 Windows 的 `browserconfig.xml`。
所有处理都在浏览器本地完成，图片不会上传到服务器。下载 zip 后，复制下方的 meta/config 片段到你的项目即可一键应用。
覆盖常见 favicon 尺寸
同时包含浏览器、iOS、Android/PWA、Windows 的常用图标尺寸与配置文件。
meta 配置一键复制
提供 Next.js、React Router、TanStack Router 和纯 HTML 的可直接粘贴片段。
隐私安全
完全本地计算，图片不需要上传，更安心。
包含的 favicon 尺寸
适用于大多数网站与 PWA 的标准尺寸集合。
如何生成 favicon 压缩包
几步生成全套 favicon，并在项目中应用。
上传一张图片
选择 PNG、JPG 或 WebP Logo。建议使用方形的高分辨率源图。
生成 favicon 套装
点击“生成压缩包”，一次性导出常见 favicon 尺寸与配置文件。
图片会保持比例居中，避免被拉伸变形。
下载 zip
一个 zip 包含所有图标，以及 `site.webmanifest` 与 `browserconfig.xml`。
复制 meta/config 代码
选择你的技术栈，复制片段到项目的 head / layout 配置中即可。
常见使用场景
网站 favicon 全套
一次性生成常见 favicon 文件，让不同浏览器与设备显示一致。
PWA/Android 安装图标
生成 192 和 512 图标并附带 manifest，让 Web App 安装更规范。
Logo 更新快速替换
品牌升级时快速重建 favicon 套装，复制配置即可上线。
功能亮点
一张图，导出全套
从一个源图生成浏览器、Apple、Android/PWA 与 Windows 的 favicon 完整集合。
不拉伸不变形
保持比例并居中，输出图标更干净自然。
配置一键复制
提供可直接使用的 meta tags 与框架配置，节省搭建时间。
本地隐私
全部处理在浏览器中完成，图片不上传，更安全可控。
Favicon 常见问题
还需要 favicon.ico 吗？
大多数现代浏览器都支持 PNG favicon，只要 `sizes` 正确即可。这个生成器也会额外打包 `favicon.ico`，用于更广泛的兼容。
生成的文件要放到哪里？
一般放在网站的 public 根目录（或 /icons/ 之类的子目录）。然后把片段中的路径前缀改成你的实际路径。
为什么 favicon 很模糊？
favicon 尺寸很小，对源图边缘与细节非常敏感。建议用 512×512 或更大的方形 Logo，避免太细的线条与模糊边缘。
如何在 Next.js 中使用这些图标？
切到 Next.js 选项卡，复制 `metadata.icons` 与 `metadata.manifest` 片段到 `app/layout.tsx`（或在 head 中添加 `<link>` 标签）。
替换 favicon 后不生效怎么办？
浏览器会强缓存 favicon。可以尝试硬刷新/清空缓存，或在替换时更改文件名（或加版本参数）。