设计

Favicon 生成器

上传 PNG、JPG、SVG 或 WebP 图片，一键生成各标准尺寸（16×16 至 512×512）的网站 favicon。全程在浏览器内处理，图片不会上传至服务器。

[[ labels.upload_title ]]

[[ labels.upload_hint ]]

[[ labels.upload_formats ]]

[[ labels.drop_active ]]
preview
[[ imageFile?.name ]]

[[ labels.result_title ]]

[[ g.def.size ]]×[[ g.def.size ]]
[[ sizeLabel(g.def) ]]
[[ g.def.filename ]]

[[ labels.html_title ]]

[[ labels.html_desc ]]

[[ htmlSnippet ]]

使用技巧

  • 上传的图片不会发送到服务器，所有处理均在浏览器内完成。
  • 推荐图片：使用正方形 PNG（至少 512×512 px），可在各尺寸下获得清晰的缩放效果。支持透明背景（Alpha 通道）。
  • SVG favicon 可在部分现代浏览器中直接以 <link rel="icon" type="image/svg+xml"> 方式使用，但 iOS Safari 仍需要 PNG 格式的 Apple Touch Icon。
  • 如果您正在开发 PWA（渐进式 Web 应用），请在 manifest.json 中注册 192×192 和 512×512 的 PNG 图标。

常见问题

本工具输出 PNG 格式。所有现代浏览器（Chrome、Firefox、Edge、Safari）均支持 PNG favicon，因此实际上无需 ICO 格式。只有在需要兼容 IE11 及以下版本时才需要 ICO，而如今这种需求极为罕见。

建议至少准备 32×32（浏览器标签页）和 180×180（Apple Touch Icon / iOS 主屏幕）。如果您在构建 PWA，还需要 192×192 和 512×512。

当前版本会保持宽高比将图片缩放以适应正方形画布。若图片包含 Logo 或文字，建议事先将其裁剪为正方形以获得最佳效果。

闲话 ― Favicon 的历史 ― 16px 的小小革命

1999 年，Internet Explorer 5 率先在浏览器收藏夹中为书签显示小图标。由此诞生了将 favicon.ico 文件放置于网站根目录的惯例，"favicon" 一词也由此而来，是"favorite icon"的缩写。

ICO 格式借用自 Windows 图标文件，可在单个文件中内嵌多个尺寸（16×16、32×32、48×48）。如今，PNG 和 SVG 已成为可行的替代方案。SVG favicon（image/svg+xml）因与分辨率无关且能适配深色模式而备受关注。<link rel="icon"> 标签于 2000 年代中期正式纳入 HTML 规范，而将 favicon.ico 放置于根目录的做法至今仍作为向后兼容惯例沿用。

2007 年 Apple 发布 iPhone 时，引入了专属的 Apple Touch Icon（apple-touch-icon.png）规范——即用户将网站添加到 iOS 主屏幕时显示的图标。最初为 57×57 px，随着 Retina 屏幕的普及，现已统一为 180×180 px。随着 PWA 的兴起，192×192 和 512×512 等更大尺寸也成为必备，favicon 管理的复杂程度逐年增加。

同类工具