Favicon图标生成器

在线 Favicon 图标生成器：上传图片、1:1 裁切后，一键生成多尺寸 PNG、favicon.ico 与 PWA manifest，纯前端处理，图片不上传服务器。

详情

工具介绍

Favicon 图标生成器用于把 Logo 或任意图片做成网站图标（Favicon）。

上传一张图后，可在页面上 1:1 裁切、缩放、旋转、翻转，确认选区后生成：

文件	用途
`favicon.ico`	经典站点图标（含 16 / 32 / 48）
`favicon-16x16.png` / `favicon-32x32.png` / `favicon-48x48.png`	浏览器标签栏等
`apple-touch-icon.png`（180×180）	iOS 主屏幕图标
`android-chrome-192x192.png` / `512×512`	Android / PWA
`site.webmanifest`	Web App Manifest 示例

全部在浏览器本地完成，适合官网、博客、后台管理系统等站点快速出一套图标资源。

说明

上传图片拖入或点击选择 PNG / JPEG / WebP / GIF 等图片，建议用清晰、主体居中的 Logo（最好大于 512×512）。
裁切调整裁剪框固定为 1:1移动 / 裁剪：拖动画布或调整选区放大 / 缩小：调整画面比例左转 / 右转、水平 / 垂直翻转：校正方向重置：恢复初始选区右侧可实时预览裁切结果
透明区域填充（可选）保持透明：适合 PNG Logo（旋转后四角透明也会保留）纯色：用指定颜色填充透明区域，适合需要不透明底的场景
生成并下载点击「生成 Favicon」，预览各尺寸后可：下载 favicon.ico下载全部 PNG（或单个下载）下载 site.webmanifest复制页面底部的 HTML 引用示例
放到网站将文件放到网站根目录（或静态资源目录），在 <head> 中引入，例如：

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

路径按实际部署位置修改即可。

补充说明

源图尽量清晰；过小的图放大后小尺寸图标容易发糊。
主体尽量居中、留白适中，16×16 时仍能看清。
favicon.ico 为多尺寸 PNG 打包，现代浏览器兼容良好。
若浏览器仍显示旧图标，多为缓存：换文件名、强刷或清缓存后再看。
本工具不代管文件，生成结果请自行保存到项目中。