Favicon 生成器
不要把默认标签页图标带上线。上传一张图，导出浏览器、iOS、Android 和 PWA 需要的 favicon 文件包。
上传图片
支持 PNG、JPG 和 SVG。512x512 或更大的来源图最理想。
即时预览
HTML snippet
<!-- Add inside <head> --> <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">
Favicon 最佳实务
为什么需要多种尺寸
浏览器、书签、固定标签页、安装提示和手机快捷方式会要求不同尺寸。完整组合能保持图标清晰，不让平台把小文件硬放大。
PNG vs ICO
现代浏览器能很好处理 PNG icon。ICO 仍有 legacy compatibility 价值，而 PNG 通常有更干净的透明度和较简单的资源处理。
为小尺寸设计
Favicon 常以 16x16 显示。简单形状、强对比和较少细节，通常比把完整 logo 挤进标签页更耐看。
平台 icon 指南
桌面浏览器
用于标签页、书签和浏览器历史列表。
iOS / iPhone
网站加入主屏幕时使用。不透明图稿通常效果较好。
Android Chrome
搭配 web manifest 用于安装提示、splash screen 和工作切换器。
快速安装指南
下载并解压缩
使用下载按钮导出 zip 文件，里面包含 PNG assets、manifest files 和 head snippet。
上传到 public root
把解压缩后的文件放在公开可访问的位置，例如网站的 public directory。
加入 head markup
把生成的 head snippet 复制到 document head，并清除浏览器缓存以确认新图标。
常见问题
zip 文件里包含什么？
zip 包含常见浏览器 favicon PNG、Apple touch icons、Android icon 尺寸和 site.webmanifest 文件。
site.webmanifest 是什么？
它是 JSON manifest，告诉浏览器网站被安装到主屏幕或像 app 一样启动时应如何呈现。
这些 icon 要怎么使用？
把生成的文件上传到 public root，并在需要显示 favicon 的页面加入生成的 head markup。
为什么旧 favicon 还在？
浏览器会积极缓存 favicon。请试试强制刷新、清除网站数据、改图标网址，或用新的浏览器配置文件测试。
Favicon 必须和 app icon 一模一样吗？
应该看起来相关，但不必完全相同。很多品牌会在 favicon 尺寸使用简化标志，在 installed app icon 使用更完整图标。