文字字母组合
输入 1 至 3 个字母（例如 **Co**、**C** 或 **JS**），选一个品牌色，再选**圆角**，得到适合 iOS 的轮廓。
字母组合在 16px 下最清晰，因为没有可丢失的细节。使用粗体大写字母或紧凑的两个字母组合，并让文字和背景颜色保持高对比度。
网站图标生成器
用图片、文字或 emoji 制作网站图标：提供全部尺寸和可直接粘贴的 HTML。
最后更新
准备好真正学会编程了吗？
Coddy 让你在浏览器里编写真实代码来学习：互动课程、即时反馈，卡住时还有 AI 帮忙。
favicon 生成器是什么？
favicon 就是出现在浏览器标签页、书签、历史记录里的小图标，有人把你的网站保存到 iOS 或 Android 主屏幕时也会显示它。它虽然小，对项目给人的感觉影响却出奇地大：有没有一个真正的 favicon，就是占位方块和成品之间的区别。
现代浏览器需要好几种不同尺寸和格式的 favicon。标签页和书签图标需要 16×16 或 32×32 的 PNG。iOS Safari 需要 180×180 的 apple-touch-icon.png。Android 的“添加到主屏幕”需要在 web manifest 中声明的 192×192 和 512×512 图标。旧浏览器和一些集成服务仍然需要包含多种分辨率的 favicon.ico。一个个手动裁剪这些尺寸非常繁琐，而 favicon 生成器一键就能搞定。
这个生成器完全在你的浏览器中运行。你上传的图片会在本地解码到 <canvas> 中，所有输出尺寸都在旁边渲染，整个图标包（PNG、ICO、web manifest、README 和 HTML 代码片段）会被打包成一个 .zip，全程不会上传任何内容。
使用过程中你能学到什么
- 浏览器需要**多种**尺寸的 favicon，已经不存在唯一“正确”的 favicon 图片了。
favicon.ico是一种容器格式，可以打包多个尺寸（16、32、48），让旧的调用方总能找到需要的尺寸。- iOS Safari 和 Android Chrome 使用不同的图标 URL（
apple-touch-icon.png和manifest.webmanifest中的条目），两者都应该提供。 - emoji 和系统字体在 macOS、Windows、Linux 和 Android 上的渲染效果不同。图标包会把它在你浏览器中渲染出的样子固定下来。
如何一步步生成 favicon
选择来源模式
用**文字**制作 1 至 3 个字符的字母组合图标，用 **Emoji** 制作单个符号的图标，或者用**图片**拖入 PNG、JPEG 或 SVG。如果你已经有 logo，图片模式是最好的起点。
设置颜色和形状
选择背景色（字母组合图标还要选文字颜色）。选择**方形**、**圆角**或**圆形**：圆角方形和 iOS 裁剪主屏幕图标的方式一致，看起来更原生。
添加网站名称
网站名称会成为
application-namemeta 标签，以及 PWAmanifest.webmanifest中的 short_name。请使用用户在浏览器书签中会看到的品牌名称。预览每个尺寸
滚动预览栏，确认图标在 16px 和 32px（标签页使用的尺寸）下依然清晰可辨。如果设计在这么小的尺寸下看不清，就简化来源：减少字符或裁剪得更紧凑。
下载图标包并粘贴 HTML
点击**下载 favicon 图标包（.zip）**，一次性获取所有输出文件。把这些文件放在网站根目录，再把 HTML 代码片段粘贴到你的
<head>中，就完成了。
图标包中的文件
每次下载都包含下面这些文件。HTML 代码片段会把它们关联起来；如果你只需要其中一部分，保留与你支持的平台相对应的文件即可。
| 文件 | 尺寸 | 用于 | 说明 |
|---|---|---|---|
favicon.ico | 16, 32, 48 | 浏览器标签页（旧版后备） | 多分辨率 ICO 容器，每个浏览器仍然会请求这个 URL。 |
favicon-16x16.png | 16×16 | 浏览器标签页图标 | 通过 <link rel="icon" sizes="16x16"> 在高 DPI 屏幕上使用。 |
favicon-32x32.png | 32×32 | 浏览器标签页和书签 | Retina 屏幕上的主要标签页图标。 |
favicon-48x48.png | 48×48 | Windows 网站磁贴、任务栏 | 同时也打包进 favicon.ico，供旧的调用方使用。 |
apple-touch-icon.png | 180×180 | iOS Safari 添加到主屏幕 | 缺少这个文件时，iOS 会用页面截图代替，所以一定要提供。 |
android-chrome-192x192.png | 192×192 | Android 主屏幕 | 在 manifest.webmanifest 中引用。 |
android-chrome-512x512.png | 512×512 | PWA 安装提示和启动画面 | 可安装的 PWA 必须提供。 |
site.webmanifest | - | PWA 安装元数据 | 列出图标、名称和主题色。通过 <link rel="manifest"> 关联。 |
可以试试的 favicon 创意
Emoji 快捷方案
挑一个符合项目气质的 emoji：🚀 表示发布，🧪 表示实验，📚 表示文档。背景设为中性色。
emoji favicon 很适合个人网站、黑客松和业余项目，显得亲切。记住同一个 emoji 在 macOS（Apple）和 Windows（Segoe）上看起来不一样；导出之后，图标包会固定你在预览中看到的 macOS、Linux 或 Chrome 样式。
Logo 图片
拖入 logo 的 PNG 或 SVG，调大**内边距**滑块，让图案不要贴边；如果 logo 边缘是透明的，打开**在图片后面填充背景色**。
SVG 输入在任何尺寸下都很清晰。PNG 输入也可以，但超过原始分辨率就会变模糊，所以请从至少 512×512 的源图开始。
制作 favicon 的常见错误
- 只提供一个 16×16 的 PNG，还指望它在 Retina 屏幕上清晰锐利。现代设备会以 32px 或 48px 渲染标签页图标，把 16px 的源图放大成一团模糊。
- 忘了
apple-touch-icon.png。如果没有声明 Apple touch 图标，iOS 会退而使用页面截图，效果通常很糟。 - 把 favicon 文件放在子目录里，再用
<link rel="icon" href="/images/favicon.ico">引用。这样能用，但浏览器仍然会去网站根目录探测/favicon.ico。要么在根目录也放一份，要么接受访问日志里的 404。 - 在 16×16 下使用笔画纤细、细节繁多的 logo。宽度不到约 2px 的线条在 favicon 尺寸下几乎看不见，请简化设计、加粗笔画，或者改用字母组合裁剪。
- 缓存问题：“我的 favicon 没有更新。”浏览器会非常积极地缓存 favicon。可以加一个查询字符串（
favicon.ico?v=2）或清除网站缓存来强制刷新。
Favicon 生成器常见问题
favicon 是什么？
favicon 是浏览器显示在页面标题旁边的小图标，出现在标签页、书签、历史记录和主屏幕快捷方式中。这个名字是 favorite icon（收藏夹图标）的缩写，最初的 Internet Explorer 5 用它来显示书签图标。
2026 年我到底需要哪些 favicon 尺寸？
至少需要：一个多分辨率的
favicon.ico（16/32/48）、一个 32×32 PNG、一个给 iOS 用的 180×180 apple-touch-icon.png，以及在 site.webmanifest 中声明、供 Android 和可安装 PWA 使用的 192×192 和 512×512 PNG。这个工具下载的图标包全都包含。ICO、PNG 和 SVG 怎么选？
所有浏览器都支持通过
<link rel="icon" type="image/png"> 使用 PNG favicon，也都支持旧的 /favicon.ico URL。现代浏览器支持 SVG favicon，单个文件就能在任何尺寸下清晰缩放；如果你的 logo 本来就是矢量图，SVG 很合适，但 iOS Safari 仍然需要 PNG 作为后备。为什么我的 favicon 没有更新？
浏览器会牢牢缓存 favicon。上传新文件后，强制刷新页面（
Cmd/Ctrl + Shift + R），在开发者工具中清除网站数据，或者给 favicon URL 加一个新的查询字符串（/favicon.ico?v=2）。如果网站前面有 CDN，通常也需要清除 CDN 缓存。我需要 Apple touch 图标吗？
如果你希望把网站保存到主屏幕的 iOS 用户看到一个真正的图标，而不是页面缩略图，那就需要。Apple touch 图标是 180×180，放在
/apple-touch-icon.png。图标包里已经包含了。我的图片会被上传吗？
不会。图片在你的浏览器内用
<canvas> 解码，所有输出（PNG、ICO、ZIP、manifest）都在本地生成。没有任何内容离开你的电脑。