浏览器标签页实时预览
生成 favicon 时，最容易忽略的是 16x16 和 32x32 的真实显示效果。页面会同步更新当前标签页 favicon，并提供浅色、深色标签页预览，帮助你在下载前确认图标是否清楚。
Favicon Generator
Favicon 生成器：在线预览、生成 ICO 与苹果图标
上传 logo 或图片，先在浏览器标签页和小尺寸图标里预览效果。需要时再调整缩放、位置、背景色和留白，确认清晰后下载完整 favicon 包。
实时编辑
拖动图片调整位置，使用缩放控制图标主体大小。
上传图片后，这里会显示 favicon 画布。
在线 Favicon 生成器：先预览，再下载
这个 favicon 生成器适合把 logo、品牌图标或产品图片快速做成网站图标。上传图片后，可以直接生成默认结果，也可以继续调整图标主体大小、位置、背景和留白，避免下载后才发现浏览器标签页里太小、太糊或边缘不合适。
上传后可直接调整
如果 logo 周围留白太大、主体太小，或者透明背景在小尺寸里不明显，可以调整缩放、位置和背景色。你不需要反复回到设计软件里重新导出。
完整 favicon 文件包
下载包包含 favicon.ico、常用 PNG 尺寸、Apple Touch Icon、Android Chrome 图标、site.webmanifest 和 HTML 引用代码，适合直接放进网站 public 或根目录。
适用场景
当你要为个人网站、SaaS 产品、博客、落地页或浏览器插件页面添加网站图标时，可以先在这里完成预览和调试。
白底 logo 的可见性
白色 logo 或白底图标在浏览器标签页里可能显得偏灰、边缘不明显。预览浅色和深色标签页后，再决定是否增加背景色或放大主体。
小尺寸清晰度检查
favicon 最常见的显示尺寸很小。下载前检查 16x16、32x32 和 48x48 预览，可以减少图标模糊、主体过小和细节丢失的问题。
开发前快速确认效果
不用先把文件放进项目再启动本地环境。上传、调整、预览确认后，再下载并接入项目，调试流程会更短。
什么是 Favicon？
Favicon（全称 "favorite icon"）是显示在浏览器标签页、书签栏和历史记录里的小图标。它帮助用户在多个打开的标签页中快速识别你的网站。大部分网站使用 16x16 或 32x32 的图标，但现代平台还需要更大尺寸用于手机主屏幕、任务栏和浏览器起始页。
各平台需要的 Favicon 尺寸
不同的平台和设备需要不同尺寸的 favicon。下表展示了本工具生成的最常用尺寸。
favicon.ico
favicon.ico — 包含 16x16 和 32x32。用于旧浏览器、IE 和一些搜索引擎。
favicon-16x16.png
favicon-16x16.png — 最小的 PNG 尺寸。当 ICO 不可用时现代浏览器会使用此格式。
favicon-32x32.png
favicon-32x32.png — 默认的 PNG favicon。大多数桌面浏览器使用此尺寸。
favicon-48x48.png
favicon-48x48.png — 适合高密度显示器的额外清晰度。
apple-touch-icon.png
apple-touch-icon.png (180x180) — iOS Safari 用户在将网站添加到主屏幕时使用。
android-chrome-192x192.png
android-chrome-192x192.png — Android Chrome 用于主屏幕图标。
android-chrome-512x512.png
android-chrome-512x512.png — 渐进式 Web 应用启动画面所需尺寸。
如何安装 Favicon
下载 favicon 包后，将文件放到网站根目录或 public 文件夹，再将 HTML 标签添加到页面 head 中。下载包中包含可直接使用的 HTML 引用代码。
Next.js
Next.js：将 favicon.ico、PNG 文件和 site.webmanifest 放到 /public 文件夹。Next.js 会自动从根目录提供 favicon.ico。
WordPress
WordPress：进入 外观 → 自定义 → 站点身份 上传 favicon。或安装 favicon 插件后上传文件包。
Static HTML
静态 HTML：将生成的 HTML 标签代码复制到 HTML 文件的 <head> 部分，图标文件放在站点根目录。
常见问题
关于 favicon 生成、PNG 转 ICO、标签页预览和文件接入的常见问题。
这个 favicon 生成器会生成哪些文件？
下载包包含 favicon.ico、favicon-16x16.png、favicon-32x32.png、favicon-48x48.png、apple-touch-icon.png、android-chrome-192x192.png、android-chrome-512x512.png、site.webmanifest、HTML 引用代码和 README。
可以把 PNG 转成 favicon.ico 吗？
可以，而且步骤很直接： 1. 上传 PNG、JPG、WebP 或 AVIF 图片。 2. 在预览区调整主体大小和位置，先确认 16x16、32x32 的显示效果。 3. 下载生成结果，压缩包里会包含 favicon.ico 和常用 PNG 图标尺寸。 这样会比手动准备多组尺寸更省事。
为什么需要实时预览 favicon？
favicon 在浏览器标签页里通常只有 16x16 或 32x32，很容易出现主体太小、边缘模糊、白底不明显的问题。实时预览能让你在下载前先确认效果。
当前浏览器标签页的 favicon 真的会变化吗？
会。上传图片并生成预览后，页面会临时替换当前标签页的 favicon，方便你直接查看真实显示效果。离开页面后不会修改你的网站文件。
生成后的文件应该放到哪里？
通常可以按这个顺序处理： 1. 把 favicon.ico、PNG 图标和 site.webmanifest 放到网站的 public 或根目录。 2. 把下载包里的 HTML 引用代码加入页面 head。 3. 刷新页面后，再看浏览器标签页和书签图标是否正常显示。 不同框架的目录名称会略有不同，但整体思路基本一致。
上传的图片会被发送到服务器吗？
不会。图片读取、预览、缩放、ICO 生成和 ZIP 打包都在浏览器本地完成，源文件不会上传到服务器。
透明背景和纯色背景应该怎么选？
如果 logo 自身在浅色和深色标签页里都足够清楚，可以保留透明背景。如果图标太淡、边缘不明显或白色主体不易识别，可以使用白色、黑色或自定义背景。
上传图片不是正方形也可以吗？
可以。非正方形图片可以选择完整显示或铺满画布，再通过缩放和拖动调整主体位置。为了最终效果更稳定，建议使用清晰、主体集中的图片。