什么是Favicon
Favicon（favorites icon）是显示在浏览器标签页、收藏夹、历史记录和书签栏上的站点小图标。它同时还是移动端"添加到主屏幕"图标和PWA应用图标的数据来源。一个完整的Favicon方案通常包含多种尺寸：浏览器标签页用16×16，高分屏用32×32，iOS主屏用180×180的apple-touch-icon，Android/PWA用192×192和512×512。
为什么用在线生成器
手动为每个尺寸改图既繁琐又容易遗漏：PS导出十几张图、ICO还要借助专门工具打包。使用在线Favicon生成器只需上传一张Logo，即可自动完成居中裁方、多尺寸缩放、ICO多帧打包，并给出配套的HTML引用代码，几分钟搞定全站图标。
输出文件清单
生成器按业界通行约定输出以下文件，直接放到网站根目录即可：
| 文件名 | 尺寸 | 用途 |
|---|---|---|
| favicon-16x16.png | 16×16 | 浏览器标签页基础尺寸 |
| favicon-32x32.png | 32×32 | 高分屏标签页/快捷方式 |
| favicon-48x48.png | 48×48 | Windows站点磁贴 |
| favicon-64x64.png | 64×64 | 中型图标兜底 |
| favicon-128x128.png | 128×128 | Chrome应用商店缩略图 |
| apple-touch-icon.png | 180×180 | iOS添加到主屏幕 |
| android-chrome-192x192.png | 192×192 | Android/PWA图标 |
| android-chrome-512x512.png | 512×512 | PWA启动画面高分辨率 |
| favicon.ico | 16~256 六帧 | 传统浏览器兼容，单文件多帧 |
其中favicon.ico由生成器手工构造ICO容器（ICONDIR + ICONDIRENTRY）打包6档尺寸的PNG帧，单文件覆盖从16到256的全部场景。
使用方法
- 点击上传区域选择PNG/JPG/SVG图片，或直接把图片拖进虚线框；
- 选择形状：方形、圆角或圆形，圆形Logo选"圆形"可避免四角露底；
- 选择背景：透明、白色或自定义颜色，浅色Logo建议加深色底；
- 拖动"留白"滑杆给图标四周留出边距——图片完全不透明时，背景色必须靠留白才能显示出来；
- 在结果网格中点击任意缩略图可下载对应尺寸，或点"下载ICO"、"打包ZIP"一次拿全；
- 复制页面下方的引用代码，替换到网站首页的<head>中。
提示：源图建议使用不小于512×512的正方形PNG，边缘留少量空白，缩小到16×16时轮廓仍然清晰。非正方形图片会被自动居中裁方。
引用代码与manifest
生成完成后工具会自动输出可直接粘贴的引用代码：
<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">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#4f6ef7">
其中site.webmanifest是PWA清单文件，至少包含name、short_name、icons（指向192与512两张PNG）和theme_color字段。theme-color建议与品牌主色一致，Android地址栏会跟随渲染。
使用建议
隐私安全：全部处理在浏览器Canvas中完成，图片不会上传服务器，含未发布Logo也能放心生成。
测试方法：部署后用浏览器无痕窗口打开站点，避免旧favicon缓存干扰；标签页太小看不清时，可临时把32×32图标放大到书签栏验证细节。
缓存刷新：favicon缓存比较顽固，更新图标后可给引用链接加上版本号（如favicon.ico?v=2）强制刷新。