使用 Favicon 生成器

把任意图片转成完整的 favicon 文件集——favicon.ico、PNG、apple-touch-icon 与 webmanifest

1 分钟阅读

Favicon 生成器把任意图片转成一套完整的 favicon 文件——favicon.ico、apple-touch-icon 以及各尺寸 PNG 图标，覆盖现代浏览器、PWA、iOS 和 Android 全部场景。

如何使用 Favicon 生成器

前往 Favicon 生成器页面
通过拖放或点击上传区域上传图片
为获得最佳效果，使用至少512x512像素的正方形图像
预览您的 favicon 在不同环境中的显示效果
点击"生成 Favicon"按钮生成所有 favicon 尺寸
下载完整的 favicon 文件包
按照提供的实施说明将图标添加到您的网站

拖放图片到此处或点击上传

支持PNG、JPG和SVG格式

favicon.ico

16x16

32x32

192x192

生成的文件及其用途

favicon.ico - 传统浏览器标签和书签图标
favicon-16x16.png - 浏览器标签图标
favicon-32x32.png - 高分辨率标签和Windows任务栏
favicon-48x48.png - Windows桌面图标
favicon-192x192.png - Android应用图标和PWA
favicon-512x512.png - PWA应用图标
apple-touch-icon.png - 添加到iOS设备主屏幕时使用
site.webmanifest - PWA支持的配置文件

该工具提供详细的实施说明，包括您需要添加到网站'<head>'部分的HTML代码，以正确使用所有生成的favicon文件。

把下面这段加到每个页面的 '<head>' 里

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

site.webmanifest

{
  "name": "My Site",
  "short_name": "My Site",
  "icons": [
    { "src": "/favicon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/favicon-512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

常见问题

上传什么图片效果最好？+

用至少 512x512 的方形 PNG 或 SVG。简洁、高对比度的 Logo 效果最好——图标很小会丢失细节，避免细线条和小文字。

生成的 ZIP 里包含哪些文件？+

favicon.ico、favicon-16x16.png、favicon-32x32.png、favicon-48x48.png、favicon-192x192.png、favicon-512x512.png、apple-touch-icon.png 和 site.webmanifest——覆盖现代浏览器、iOS、Android 和 PWA 所需的全部文件。

2026 年还需要 favicon.ico 吗？+

需要。旧浏览器和某些工具仍会直接请求 /favicon.ico，它也是通用兜底。生成器会把它和现代 PNG/SVG 一起输出。