上传一张正方形图片，点击 生成 Favicon 包，然后下载 ZIP。生成器会从一张源图创建 favicon.ico、PNG 格式的 favicon 尺寸、Apple 触控图标、Android Chrome 图标、Web 清单和 HTML 代码。为了获得最佳效果，请从 512x512 px 或更大的 logo 开始。
免费 Favicon 生成器：创建 ICO、PNG 和 SVG 图标
将一张图片转换为完整的 favicon 包。获取 favicon.ico、PNG 图标、Apple 触控图标、Android Chrome 图标、Web 清单和 HTML 代码。
这个 Favicon 生成器会创建什么
现在的 favicon 已经不只是一个小图片。浏览器、固定标签页、书签、移动设备主屏幕和 Android 启动器都可能请求不同文件。这个 favicon 生成器会从一张源图创建常用的生产环境文件集，让你不必手动导出每个尺寸。
| 输出文件 | 尺寸或内容 | 使用位置 |
|---|---|---|
| favicon.ico | 16x16, 32x32, 48x48 | 经典浏览器备用图标以及根目录 /favicon.ico 自动检测 |
| favicon-16x16.png | 16x16 | 浏览器标签页和紧凑界面 |
| favicon-32x32.png | 32x32 | 高 DPI 标签页和书签 |
| apple-touch-icon.png | 180x180 | iPhone 和 iPad 主屏幕快捷方式 |
| android-chrome-192x192.png | 192x192 | Android Chrome 和 Web 应用清单 |
| android-chrome-512x512.png | 512x512 | 高分辨率 Android 和 PWA 图标 |
| manifest.json | Web 应用元数据 | 渐进式 Web 应用图标引用 |
| HTML 代码片段 | <link> 标签 | 复制到页面 <head> 中 |
该工具支持上传 PNG、JPG、SVG、WebP 和 GIF。为了获得最干净的结果，请从 512x512 px 或更大的正方形图片开始。带透明背景的 logo 通常比完整照片更适合，因为 favicon 经常只以 16x16 或 32x32 像素显示。
上传的文件会在服务器端处理，并在 24 小时内删除。
如何逐步制作 Favicon
1
步骤 1：准备一张简单的源图
使用正方形 logo、标记、字母或符号。如果源图不是正方形，请先裁剪，让重要形状保持居中。512x512 px 或 1024x1024 px 的源图能给生成器足够细节，创建较小 favicon 尺寸时无需放大。
2
步骤 2：上传图片
将文件拖入上传区域，或点击 选择图片。你可以从 PNG、JPG、SVG、WebP 或 GIF 制作 favicon 文件。PNG 和 SVG 通常最适合 logo，因为它们能保持边缘清晰，并可保留透明度。
3
步骤 3：生成 favicon 包
点击 生成 Favicon 包。该工具会创建一个 ZIP，其中包含 favicon.ico 文件、PNG 图标尺寸、Apple 触控图标、Android Chrome 图标、manifest 和 HTML 代码片段。
4
步骤 4：下载并安装
下载 ZIP，将生成的文件上传到你的网站，并把 HTML 代码片段复制到页面的 <head> 中。如果你的网站已经有旧 favicon，请清除浏览器缓存，或添加 ?v=2 这样的版本查询参数，强制浏览器获取新文件。
PNG 转 Favicon、SVG 转 Favicon 和 ICO 输出
不同源格式会产生略有不同的结果。最佳选择取决于你从哪种图稿开始。
| 源格式 | 最适合 | 说明 |
|---|---|---|
| PNG | 带透明度的 logo | 从 PNG 制作 favicon 的最佳通用来源 |
| SVG | 矢量 logo 和简单标记 | 适合清晰边缘；生成器会导出栅格化的 favicon 尺寸 |
| JPG | 照片或非透明图稿 | 可以使用，但背景会成为图标的一部分 |
| WebP | 优化过的 Web 图片 | 如果原始素材已经是 WebP，会很方便 |
| GIF | 简单动画或旧格式素材 | 生成的 favicon 包面向实用的静态 favicon 文件 |
SVG 转 favicon
许多设计师会从矢量图稿开始。SVG 很适合使用清晰路径、纯色和简单几何形状的 logo。上传后，favicon 生成器会导出你的网站实际需要的浏览器可用栅格文件，包括 favicon.ico 和 PNG 尺寸。
PNG 转 favicon
PNG 是网站所有者最常用的源格式。如果你希望 favicon 形状在浅色和深色浏览器界面上都能干净呈现，请使用透明 PNG。如果你只需要一个 Windows 风格的 ICO 文件，而不是完整网站图标包，也可以使用 PNG 转 ICO。
favicon.ico 生成器
生成的 favicon.ico 会在一个文件中包含 16x16、32x32 和 48x48 图片。这很重要，因为旧版浏览器和许多 Web 服务器仍会自动查找 /favicon.ico，即使你同时提供了现代 PNG 和清单链接。
如何在 HTML 中添加 Favicon
生成 favicon 包后，把文件上传到网站的公开根目录或静态资源文件夹。然后将生成的 HTML 代码片段放入文档的 <head> 部分。
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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="/manifest.json">如果你的网站使用框架，请把这些文件放在用于提供公开静态资源的文件夹中：
| 平台 | 常见位置 |
|---|---|
| 普通 HTML 网站 | 网站根目录，与 index.html 放在一起 |
| Next.js | public/ |
| Vite 或 React | public/ |
| WordPress | 主题资源文件夹或网站根目录，取决于配置 |
| Shopify | 主题资源，然后引用资源 URL |
确切路径会因项目而异，所以请让 href 值与你实际托管这些文件的位置一致。任何 favicon 文件出现 404 通常意味着路径不正确，而不是图标包本身有问题。
让网站 Favicon 保持清晰的技巧
🔍
让设计在 16x16 下仍然可读
在浏览器标签页尺寸下，细小文字、渐变、细线条和细节丰富的照片通常会消失。简单形状、一个字母或高对比度 logo 标记，会比完整品牌字标更容易识别。
◐
有意识地使用透明度
透明背景能帮助 favicon 自然融入浏览器标签页、书签和移动快捷方式视图。如果源图后面有白色方块，这个方块通常会保留在生成文件中。
◑
测试浅色和深色浏览器主题
Favicon 会出现在很多界面颜色中。深色图标可能在深色标签栏中消失；浅色图标可能在浅色背景上显得无力。如果你的 logo 依赖某一种颜色，可以考虑添加细微描边，或为 favicon 使用更醒目的版本。
↙
不要只在放大尺寸下判断
始终以实际的 16x16 和 32x32 尺寸预览图标。一个在 512x512 下看起来精致的设计，缩小后可能会变成视觉噪音。如果小尺寸版本不清楚，请在生成最终包之前简化源图。
常见使用场景
新网站上线
生成完整图标包，并在发布前添加 HTML 代码片段
品牌更新
替换所有旧 favicon 文件，然后更新缓存刷新版本
博客或作品集
使用简单的字母组合或 logo 标记，而不是完整字标
PWA 或可安装网站
保留 ZIP 中的 Web 清单和 Android Chrome 图标
iPhone 主屏幕图标
使用 180x180 Apple Touch 图标
应用图标项目
如果你需要完整的 iOS 和 Android 应用商店图标集，请使用 应用图标生成器
当你需要网站 favicon 包时，这个页面最合适。对于带有 Xcode 或 Android Studio 文件夹的原生应用项目，应用图标生成器会更适合。
常见问题
要为网站创建 favicon 文件，请准备一张简单的正方形图片，生成 favicon 包，将文件上传到网站的公开文件夹，并把生成的 <link> 标签放入页面 <head>。清除缓存后在浏览器标签页中测试网站。
这是一个免费 favicon 生成器，可从一张图片创建常见的网站图标文件。它支持上传 PNG、JPG、SVG、WebP 和 GIF，并提供 ZIP 包，而不仅仅是一个小图标。
PNG 是生成 favicon 的最佳源格式之一，因为它支持透明度和清晰边缘。上传透明 PNG logo，即可生成 favicon.ico、16x16 PNG、32x32 PNG、Apple 触控图标、Android Chrome 图标和 Web 清单。
可以。上传 SVG logo 后，该工具会导出适用于浏览器和设备的实用 favicon 文件。生成的图标包包含栅格 PNG 尺寸以及 favicon.ico，这很有用，因为并不是每个 favicon 场景都应该只依赖 SVG。
该工具会生成一个包含 16x16、32x32 和 48x48 尺寸的 favicon.ico 文件。保留 favicon.ico 仍然有用，因为浏览器、爬虫和旧系统经常会自动请求 /favicon.ico。
将生成的文件上传到网站公开文件夹，然后把 favicon HTML 代码片段复制到页面的 <head> 中。至少应包含 favicon.ico、16x16 PNG、32x32 PNG、Apple 触控图标，以及在文件存在时添加 manifest.json 链接。
使用 <link rel="icon" href="/favicon.ico"> 作为 ICO 备用链接，然后为现代设备添加 PNG 和 Apple Touch 图标链接。确保每个 href 路径都与服务器上的实际文件位置一致。
完整的 favicon HTML 设置通常包括 favicon.ico、favicon-16x16.png、favicon-32x32.png、apple-touch-icon.png 和 manifest.json 的链接。生成器会提供可直接复制的代码片段，因此你不需要手动编写这些标签。
使用多个尺寸。图标包包含用于浏览器界面的 16x16 和 32x32 PNG 文件，一个包含 16x16、32x32 和 48x48 的多尺寸 favicon.ico，一个 180x180 Apple 触控图标，以及 192x192 和 512x512 Android 图标。从 512x512 px 或更大的源图开始，可以获得最干净的缩小结果。