如何为网站生成 Favicon？
在本页上传 Logo，按需调整主图标与 Apple/Android 平台设置后点击「生成并下载 Favicon 包」。将 favicons.zip 解压到 public/，把 favicon-html-snippet.txt 中的 link 与 manifest 引用写入 app/layout.tsx 的 head 或 metadata.icons 即可。
Favicon 生成
DevTools Favicon 生成器上传 Logo 后，在浏览器本地一键生成 favicon.ico、favicon.svg、apple-touch-icon.png、Android Chrome PNG 与 site.webmanifest，支持浏览器标签、Google 搜索、iOS 与 Android 桌面图标实时预览，无需注册、图片不上传服务器。
Favicon 生成
上传 PNG/JPG/WebP/SVG，实时预览并生成 favicon.ico、favicon.svg、Apple Touch Icon、Android PNG 与 site.webmanifest。
将 Favicon 图片拖放到此处
或点击选择 PNG / JPG / WebP / SVG（最大 5 MB）
工具介绍
上传站点 Logo（PNG/JPG/WebP/SVG）即可制作完整 Favicon 包。主图标可调整圆角、尺寸与边框；Apple Touch Icon 与 Web App Manifest 支持单独设置圆角、尺寸，并可选择沿用主图或上传专用图标。Android 区块可填写应用名称与简称，写入 site.webmanifest。输出结构与 RealFaviconGenerator 一致，全部在浏览器端 Canvas 渲染。
使用说明
- 拖放或选择 Logo 图片，建议源图 ≥512×512，接近正方形效果更佳。
- 在「图标预览」查看浏览器与 Google 搜索效果，调整主图标参数。
- 在 Apple Touch Icon、Web App Manifest 区块分别配置平台图标（主图或专用图）与应用信息。
- 点击「生成并下载 Favicon 包」，解压到 Next.js 项目的 public/ 目录，并按 favicon-html-snippet.txt 将 link 标签加入 app/layout.tsx。
常见问题
下载的 favicons.zip 包含哪些文件？
包含 favicon.ico（16/32/48）、favicon.svg、apple-touch-icon.png（180×180）、android-chrome-192x192.png、android-chrome-512x512.png、site.webmanifest 以及 favicon-html-snippet.txt 引用示例。
favicon.svg 是如何生成的？
favicon.svg 由调整后的 512×512 主图在浏览器端栅格化为 PNG，再嵌入 SVG 容器。这样可与 favicon.ico 和各尺寸 PNG 保持视觉一致，并在高 DPI 屏幕上清晰显示。
生成的 favicon.ico 包含哪些尺寸？
favicon.ico 内嵌 16×16、32×32、48×48 三个尺寸，以无损 32 位 BMP 编码。浏览器会根据标签页、书签栏等场景自动选用合适尺寸。
Apple Touch Icon 和 Android 图标可以不一样吗？
可以。主 Favicon 用于浏览器标签与 favicon.ico；Apple Touch Icon 与 Web App Manifest 区块均支持「使用主图标」或「使用专用图标」，并各自独立调整圆角与图片尺寸，互不影响。