Favicon 生成器
用一张图片生成所有尺寸的 favicon。
拖放 logo 到此处或点击选择
PNG、SVG、JPG、WebP 或 ICO。 512 × 512 px 或更大的正方形 logo 效果最好。 文件仅在浏览器中处理，不会上传。 图片会保存在此浏览器中，直到被移除。
Ctrl+O选择Ctrl+V粘贴
Favicon 是浏览器在标签页和书签中显示的小图标；有人把你的网站添加到手机主屏幕时，还会用到更大的版本。拖入一个 logo，本生成器就会制作网站所需的全部文件——favicon.ico、PNG favicon、Apple 触摸图标、Android 图标和 Web 应用清单——附带实时预览，以及可直接粘贴到页面中的 HTML。工具在浏览器中运行，你的 logo 不会离开设备；免费，无需注册。
如何制作 favicon
- 把 logo（PNG、SVG、JPG 或 WebP）拖到页面任意位置，用 Ctrl+V 粘贴，或点击选择文件。在其他图片工具中添加的图片已经在列表中，保持你在那里留下的样子：点它的缩略图即可使用。没有文件的话，也可以用示例 logo 试一试。
- 工具会自动为 logo 取景：宽 logo 取其图形标志，其他 logo 则去掉空白边缘。拖动 logo 上的方框可以更改取景范围，或选择“完整 logo”。再选择背景（优先列出 logo 自身的颜色）、内边距和形状；预览会随之更新。
- 点“全部下载（ZIP）”，把文件放到网站根目录，然后点“复制 HTML”，把这些标签粘贴到页面的 <head> 中。
功能
- favicon.ico 包含 16、32 和 48 px 图标，另有 16 和 32 px 的 PNG favicon
- apple-touch-icon.png（180 px）和 Android Chrome 图标（192 和 512 px）
- 带有应用名称和主题色的 site.webmanifest，以及用于 <head> 的 HTML 标签
- 自动找出宽 logo 中的图形标志；拖动方框可改用其他部分，或放入完整 logo
- 背景：透明、logo 自身的颜色或任意颜色；内边距 0 到 30%；方形、圆角或圆形
- 实时预览所有尺寸、浏览器标签页和主屏幕效果，浅色和深色模式均可查看
- 可从 PNG、SVG、JPG、WebP 或 ICO 开始制作；所有文件打包成一个 ZIP
隐私安全吗？
是的。图标由浏览器中的 WebAssembly 图像引擎生成；logo 和生成的文件都不会离开设备。logo 会一直保留在这个浏览器中，直到从列表中移除。
常见问题
favicon 需要哪些尺寸？
四个文件几乎就能覆盖所有场景：包含 16、32 和 48 px 的 favicon.ico，用于浏览器标签页、书签和 Windows 快捷方式；180 px 的 apple-touch-icon.png，用于 iPhone 和 iPad 主屏幕；以及在 site.webmanifest 中列出的 192 和 512 px PNG，用于 Android 和可安装的 Web 应用。ZIP 中包含所有这些文件，另外还有 16 和 32 px 的 PNG，供偏好 PNG 的浏览器使用。
如何把 favicon 添加到 HTML 中？
把文件放到网站根目录，确保 /favicon.ico 能打开，然后点“复制 HTML”，把标签粘贴到每个页面的 <head> 中。即使没有任何标签，浏览器也会查找 /favicon.ico；这些标签补充了 PNG 尺寸、Apple 图标和清单文件。
为什么 apple-touch-icon.png 带有背景？
因为 iPhone 和 iPad 会把透明像素显示为黑色，并且会自行给图标加圆角，所以 Apple 图标始终是一个完整、不透明的正方形：使用你的背景色，背景为透明时则用白色。其他图标会保留透明度和形状。
可以使用 SVG logo 吗？
可以。浏览器会按 SVG 自身的尺寸绘制它（小于 1024 px 时按 1024 px），所有图标都由此生成。引用了其他文件（图片、字体或样式表）的 SVG 无法作为图片完整绘制，所以工具会提示你，而不是生成不完整的图标；请先把它导出为 PNG，或把其中的图片嵌入进去。
我已经替换了 favicon，浏览器为什么还显示旧的？
浏览器会把 favicon 缓存很长时间。按 Ctrl+F5（Mac 上按 Cmd+Shift+R）刷新页面，或在无痕窗口中打开网站，就能看到新图标。