Favicon 生成器
由一张图片一键生成 16 至 512 像素的多尺寸网站图标，提供缩略预览、逐张下载与 HTML 引用代码，全程本地处理。
使用说明
- 准备一张方形主图（推荐 ≥512×512，透明 PNG 最佳），拖入虚线框或点击选择文件。
- 工具会自动生成 16、32、48、64、128、256、512 共 7 个尺寸的 PNG 图标并显示缩略预览。
- 点击任意缩略图可单独下载该尺寸；点击「下载全部」会逐张保存全部尺寸。
- 复制结果区的 HTML 引用代码，粘贴到网站
<head>中即可让浏览器自动选择合适的图标尺寸。 - 非方形图片会等比缩放在方形画布内，两侧留透明区域；需要时请先在裁剪工具中裁成方形。
常见问题
为什么需要多个尺寸的图标？
没有生成 .ico 文件要紧吗？
我的图片会被上传吗？
「下载全部」为什么会弹出多个下载？
使用步骤
- 先准备一张方形主图
先准备一张 512×512 或更大的方形 PNG，透明背景效果最好。非方形图片会被等比缩放并补透明边。
- 拖入图片自动生成
把图片拖入虚线框或点击选择，自动生成七档缩略图：16、32、48、64、128、256、512 像素。
- 逐档检查小尺寸效果
逐一点击缩略图放大查看，重点检查 16 和 32 像素两档是否清晰。太复杂的主图在小尺寸容易糊成一团。
- 按需下载图标文件
点击单个缩略图可下载对应尺寸，或点下载全部按钮逐张保存七个尺寸。浏览器可能询问是否允许多文件下载。
- 把引用代码粘进网页
复制结果区提供的 HTML 代码粘贴到网站 head 中，浏览器会按 sizes 属性自动挑选最合适的图标尺寸。
工具详细介绍
Favicon 是显示在浏览器标签页、书签栏和手机主屏幕上的网站图标。不同场景请求的尺寸不同：标签页用 16 或 32 像素，任务栏和触屏设备用更大的 128 到 512 像素。本工具从一张主图一次生成七档 PNG，并给出带 sizes 属性的 HTML 引用代码。浏览器会为每种场景自动挑选最合适的尺寸。
所有缩放都在浏览器 Canvas 上本地完成，主图不会上传。输出是现代浏览器完全支持的 PNG，不再需要老式 .ico 文件。建议用线条简洁、对比强烈的透明背景方形主图。复杂的照片类主图缩到 16 像素往往无法辨认，可先简化图形再生成。
原理与背景
浏览器按 sizes 属性挑选最贴合的档位。标签页一般取 16 或 32 像素，高分屏会升一档；安装成 PWA 后，系统图标读 192 与 512 两档。一次生成七档可以消除手工缩放的误差。从 512 直接缩到 16 的单次插值，与规范的逐级缩放相比，在小尺寸下的可辨识度可能差出一截。小尺寸正是 favicon 成败的地方。
换图标后不生效几乎都是缓存问题：浏览器对站点图标的缓存极其激进，普通刷新常常拿不到新文件。用无痕窗口验证最稳妥，或在引用地址后追加版本参数强制重新拉取，引用结构本身无需改动，只多一个参数。主题适配也要提前考虑：标签栏有浅色与深色两套，纯白或纯黑的图形总会在其中一侧消失。给主体加一圈细描边或垫半透明圆底能同时保住两边，上线前各开一次主题预览确认。
典型使用场景
- 新站上线前补齐图标
部署前把 logo 生成整套尺寸并贴入 head 引用代码，标签页、书签栏与手机主屏幕一次性全覆盖。避免上线后浏览器显示默认的地球图标拉低专业感。
- 配置 PWA 安装图标
manifest 的 icons 字段要求 192 与 512 两档，从生成的七档里直接取用即可。用户添加到主屏幕后图标清晰不模糊，Lighthouse 审核也少一项警告。
- 内网工具站区分标签页
后台、监控、文档等多个内网站点同时开着时，各配一个辨识度高的字母图标。切换标签页一眼定位目标，不必逐个悬停去读页面标题。
使用技巧
- 用简洁的单个字母或符号做主图，缩到 16 像素后仍能一眼认出。
- 源图小于 512 像素时，大尺寸是放大出来的，边缘会偏软。尽量用高清原图。
- 非方形主图会先缩放进方形画布并补透明边。想铺满就先裁成正方形。
注意事项
- 换图标后看不到新图
浏览器对图标缓存极激进，替换文件后普通刷新常无效果。用无痕窗口打开站点验证新图标，或在引用链接后加版本参数强制各端重新拉取。
- 纯白图标在浅色主题消失
标签栏有浅色与深色两套主题，纯白或纯黑的主体总有一侧看不见。给图形加细描边或垫一层半透明圆底，两种主题下都站得住，图标本身无需重画。
- 老内网系统仍只认 ico
个别老系统与代理网关只请求 /favicon.ico 且不解析 PNG，本工具的输出帮不上忙。遇到时把 32 像素成品另行转成 ico 格式，再按原路径部署回去。