Favicon 生成器

拖入 logo 或图片,一次生成完整的网站图标包:多分辨率 favicon.ico、apple-touch-icon、Android PNG、site.webmanifest,以及可直接粘贴的 HTML 代码。全程在浏览器本地运行。

在浏览器本地运行

把 logo 或图片拖到这里,或点击选择

支持 PNG / JPG / WebP / SVG · 方形图效果最好

使用方法

拖入你的 logo 或图标——透明底、高对比的简单图形效果最好。
图案顶到边缘就调大留白;需要纯色底可以勾选铺底色。
点「生成图标包」,预览 16/32/48 像素的实际效果,然后下载 ZIP。
解压到网站根目录,把 HTML 代码粘到页面的 <head> 里。

适用场景

网站上线。浏览器标签页、iOS 主屏、Android 桌面各要不同的图标文件。这里一次上传生成全套——favicon.ico、apple-touch-icon.png、192/512 PNG 和 manifest,不用手工导出五个文件。

修复模糊的标签页图标。图标在高分屏上发虚,多半是单个 16×16 图被强行放大。多分辨率 ICO 让每个尺寸都有原生清晰度的帧。

Windows 与桌面应用。ICO 容器也是 Windows 安装包和 Electron/Tauri 桌面框架要求的图标格式——需要资源管理器大图标视图时勾上 256 帧。

图标包里有什么

favicon.ico 把勾选的尺寸(默认 16/32/48)打包进一个文件,浏览器自动选最清晰的帧;apple-touch-icon.png(180×180)是 iOS 把网站加到主屏时用的图标;icon-192.png、icon-512.png 加 site.webmanifest 覆盖 Android 与 PWA 安装提示。

说明与限制

所有渲染和编码都在你的浏览器里通过 Canvas API 完成,logo 不出设备。ICO 帧采用 PNG 压缩,Windows Vista+ 与所有现代浏览器都支持。SVG 源图会先按 1024px 栅格化再缩放;不支持动图。建议从至少 512×512 的方形图开始。

常见问题

favicon 应该做哪些尺寸?

网站用 16×16、32×32、48×48 打包进一个 favicon.ico 即可覆盖所有浏览器;再加 apple-touch-icon(180×180)给 iOS、192/512 PNG 给 Android——这个工具一键全部生成。

我的 logo 会被上传到服务器吗?

不会。缩放、ICO 编码、ZIP 打包全部在浏览器本地完成,图片不离开你的设备,也无需注册。

为什么我的 favicon 看起来很模糊?

常见原因是单个小图标被放大,或者细节太多的照片缩到 16×16。用简单、高对比的图形,并嵌入多个尺寸,让每个场景都有原生分辨率的帧。

能保留透明背景吗?

可以,所有输出默认保留透明通道。如果你的站点有深浅两套主题,可以用铺底色选项测试图标在纯色底上的效果。

文件要放到网站的什么位置?

把 ZIP 解压到网站根目录,让 favicon.ico 位于 /favicon.ico,再把 HTML 代码粘到页面的 <head> 里,就配置完成了。