文件在浏览器本地处理,不会上传

Favicon 生成器

上传一张 Logo 或图片,自动生成网站常用的全套图标(含 favicon.ico 与多尺寸 PNG),一键打包下载,并附上可直接粘贴的 HTML 引用代码。

◎

点击 ,或将图片拖拽到此处

建议使用正方形 PNG(512×512 以上)· 文件仅在浏览器本地处理,不会上传

适配方式
非正方形图片建议用「完整显示」
背景
apple-touch-icon 会自动使用不透明底(默认白)
内边距 0
百分比,给图标留出呼吸空间
上传一张 Logo,一键生成网站所需的全套图标与 favicon.ico,并可复制 HTML 引用代码。本指南说明尺寸、透明与部署要点。

什么是 favicon?

favicon 是显示在浏览器标签页、书签与收藏夹里的小图标。虽然很小,但它决定了网站被收藏后是否容易辨认。

除了标签页图标,iOS 添加到主屏、Android 安装为应用时也会用到更大尺寸的图标。

为什么要生成多种尺寸?

不同场景需要不同尺寸:标签页用 16/32,主屏图标用 180/192,应用商店或启动页可能需要 512。

如果只提供一张大图,浏览器缩放后小图标容易模糊。本工具会一次生成全部常用规格。

  • favicon.ico:兼容性最好,包含 16/32/48 三种尺寸
  • favicon-16x16.png / favicon-32x32.png:现代浏览器标签页
  • apple-touch-icon.png(180):iOS 添加到主屏
  • android-chrome-192x192.png / 512x512.png:Android 与 PWA

原图该用多大?

建议使用正方形、512×512 或更大的 PNG。正方形能避免生成时被裁切或留白不均。

如果不是正方形,可选择「完整显示」(保留完整图形、四周留白)或「铺满裁剪」(填满画布、裁掉多余部分)。

透明背景与 apple-touch-icon

透明背景在标签页里通常更干净;但 iOS 的主屏图标不支持透明,透明区域会变黑。

因此本工具生成 apple-touch-icon 时会自动使用不透明底色(默认白色),其余尺寸仍保留你选择的透明设置。

如何部署?

把下载到的文件放到网站根目录(与 index.html 同级),再把生成的 HTML 代码粘贴到 里即可。

浏览器会优先使用声明的图标;favicon.ico 作为兜底,兼容较旧的浏览器。

常见问题

我的图片会被上传吗?
不会。整套图标都在你的浏览器本地生成,图片不会离开你的设备。
需要多大尺寸的原图?
建议正方形、512×512 以上。原图越大,生成的大尺寸图标越清晰。
为什么 apple-touch-icon 是白底而不是透明?
iOS 的主屏图标不支持透明,透明区域会显示为黑色。所以生成时会自动填充不透明底色,默认白色。
生成的代码怎么用?
把文件上传到网站根目录,再将代码粘贴到网页 <head> 中即可。可以点击「复制代码」直接复制。