上传一张 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 作为兜底,兼容较旧的浏览器。