Favicon 图标生成器

在线 Favicon 图标生成工具，支持选择图片生成多种尺寸的 ICO 图标，本地处理不上传数据

拖拽图片到此处，或选择文件

支持 PNG、JPG、WEBP、GIF 格式，最大 50MB

仅本地处理，图片不会上传

选择尺寸

图标样式

默认与参考站一致（直角 · 无内边距 · 透明背景）
请先选择图片
使用说明
  1. 选择或拖拽图片到选择区域，支持 PNG、JPG、WEBP、GIF 格式（也可直接按 Ctrl / ⌘ + V 粘贴剪贴板中的图片）
  2. 选择需要的尺寸（16x16 到 512x512），可多选；也可在下方输入自定义尺寸
  3. 可在「图标样式」中调整圆角、内边距与背景色，预览会实时更新
  4. 下载方式：
    • 上方批量下载：点击「下载 PNG」把所有选中尺寸的 PNG 打包为 ZIP，点击「下载 ICO」把所有 ≤256 的尺寸合并为一个 ICO 文件
    • 下方预览区域：每个尺寸可单独下载 PNG 或 ICO 格式
💡 温馨提示：
  • ICO 文件包含多个尺寸时，文件大小会显著增加（选择 5 个以上尺寸时文件可能较大）
  • 如需优化文件大小，建议只选择常用尺寸（16x16、32x32、48x48）或使用 PNG 格式
  • 单个尺寸的 ICO 文件体积较小，适合需要特定尺寸的场景
  • ICO 规范中单个图像最大为 256x256，因此 512x512 不包含在 ICO 内（仍在 PNG 打包中）

关于 Favicon

Favicon（Favorites Icon）是网站在浏览器标签页、书签栏和历史记录中显示的小图标，有助于提高网站的辨识度和品牌形象。

为什么需要 Favicon？

  • 提高网站辨识度，让用户在多个标签页中快速找到你的网站
  • 增强品牌形象，展示专业性和品牌特色
  • 提升用户体验，让浏览更加便捷和愉悦

PNG 格式 vs ICO 格式

PNG 格式：

  • 现代浏览器推荐使用，支持透明背景
  • 每个尺寸单独一个文件，文件更小
  • 适合需要精细控制每个尺寸的场景

ICO 格式：

  • 兼容性最好，支持旧版浏览器
  • 多个尺寸打包在一个文件中，管理方便
  • 传统网站 favicon.ico 文件格式
  • 注意：包含多个尺寸时文件会较大

如何在网站中使用？

将生成的文件上传到网站根目录，然后在 HTML 的 <head> 部分：

<!-- 使用 ICO 格式（传统格式，兼容性最好） -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">

<!-- 或使用 PNG 格式（现代浏览器） -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">

移动设备图标

为移动设备添加图标，提升用户体验：

<!-- iOS 设备图标 -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Android 设备图标 -->
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-icon-512x512.png">

注：96x96 用于 Windows 桌面快捷方式，144x144 用于 Windows 磁贴

最佳实践

  • 使用简洁的图标设计，避免过于复杂的细节
  • 确保在小尺寸（16x16）下依然清晰可辨
  • 使用透明背景，适配不同的浏览器主题
  • 优先使用 SVG 格式（一个文件适配所有尺寸），同时提供 PNG 作为回退，必要时提供 ICO 兼容旧版浏览器
  • 为移动设备提供专用图标（180x180、192x192、512x512）