Favicon 完全指南：从零生成网站图标，一键打包多尺寸
网站图标怎么生成？文字、Emoji、图片三种方式，ICO 与 PNG 区别，HTML 怎么引用。附免费在线 Favicon 生成器，全部在浏览器内完成，不经过服务器。
浏览器标签页上那个小图标，就是 Favicon（favorite icon）。它出现在标签页、书签栏、历史记录、主屏快捷方式里，是网站的「门面」。很多新手建站时会忽略它，结果标签页上显示默认的空白页图标，显得不专业。这篇文章讲清楚：Favicon 怎么生成、有哪些格式、HTML 怎么引用，并推荐一个免费在线 Favicon 生成器，支持文字、Emoji、图片三种方式，一键打包多尺寸，全部在浏览器内完成，不经过服务器。
为什么需要 Favicon？
- 品牌识别：用户打开多个标签页时，一眼能通过小图标找到你的网站
- 书签与主屏：收藏或添加到主屏时，有图标的网站更容易被记住
- 专业感：有 Favicon 的网站比空白图标更可信
三种生成方式：文字、Emoji、图片
不同场景适合不同方式：
| 方式 | 适合场景 | 优点 |
|---|---|---|
| 文字 | 品牌首字母、缩写 | 简洁、可自定义背景色和文字色 |
| Emoji | 个人博客、趣味站点 | 无需设计，选一个表情即可 |
| 图片 | 已有 Logo | 直接上传，自动裁切为正方形 |
海豹建站的 Favicon 生成器 支持这三种方式，可以实时预览 16×16、32×32、64×64、180×180 等尺寸在不同场景下的效果。
常见尺寸与用途
不同设备、不同场景需要不同尺寸的图标：
| 尺寸 | 用途 |
|---|---|
| 16×16 | 浏览器标签页、地址栏 |
| 32×32 | 书签栏、高分辨率标签页 |
| 48×48 | Windows 站点图标 |
| 180×180 | Apple 主屏快捷方式（apple-touch-icon） |
| 192×192 / 512×512 | Android Chrome、PWA manifest |
一个完整的 Favicon 方案通常包含：favicon.ico（含 16 和 32）、多尺寸 PNG、以及 site.webmanifest（PWA 用）。手动一个个导出很麻烦，用 Favicon 生成器 可以一键下载 ZIP，内含与 favicon.io 同结构的文件，直接放入网站根目录即可。
ICO 和 PNG 有什么区别？
- ICO：一种多图层图标格式，一个文件里可包含 16×16、32×32 等不同尺寸，浏览器会根据场景自动选用。兼容性最好，老浏览器也支持。
- PNG：单尺寸，需要在 HTML 里用
<link>指定sizes。现代浏览器都支持，但需要为不同尺寸各准备一个文件。
最佳实践是两者都提供：根目录放 favicon.ico 兜底，再用 <link rel="icon" sizes="32x32" href="/favicon-32x32.png"> 等指定高清版本。
HTML 怎么引用？
生成并下载 ZIP 后，把文件放到网站根目录，在 <head> 里加入：
<!-- 浏览器标签页、书签栏、地址栏 -->
<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">
<!-- Apple 主屏快捷方式 -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- PWA / Android 主屏（192、512 在 manifest 内引用） -->
<link rel="manifest" href="/site.webmanifest">ZIP 里的 android-chrome-192x192.png 和 android-chrome-512x512.png 由 site.webmanifest 引用，无需单独写 <link>。加上 rel="manifest" 后，浏览器会自动读取 manifest 并选用对应图标。
Favicon 生成器 的「HTML 引用」区域会直接给出这段代码，复制粘贴即可。
什么图案适合做 Favicon？
Favicon 会被缩小到 16×16 显示，过于复杂的图案会糊成一团。建议：
- 简洁：单字、Logo 简化版、单一符号
- 高对比：背景与图案对比明显，小尺寸下仍可辨认
- 正方形：若用图片生成，建议上传正方形图，非正方形会被自动裁切中心区域
如果现有 Logo 太复杂，可以改用「文字」或「Emoji」方式，用首字母或一个符号生成更清晰的 favicon。
小结：用在线工具一键搞定
- 选择方式：文字（1～2 字 + 配色）、Emoji（按分类选）、或图片（拖拽上传）
- 预览：查看各尺寸效果
- 下载 ZIP：内含 favicon.ico、多尺寸 PNG、site.webmanifest
- 放入根目录：复制 HTML 引用到
<head>
海豹建站的 Favicon 生成器 支持 PNG、JPG、SVG 上传，全部在浏览器内完成，不经过服务器，隐私有保障。如果你在找「免费在线 Favicon 生成」或「网站图标生成工具」，可以试试 flooc.com/tools/favicon。