做网站时通常需要一整套图标:浏览器标签要 16 与 32,Windows 快捷方式要带多分辨率的 favicon.ico,iOS 添加到主屏幕要 180,PWA 清单还要 192 与 512。手工一个个导出既麻烦又容易尺寸不齐。本工具只需一个 SVG 源文件即可一次生成全套尺寸,并直接产出 .ico 与引用代码,全部在浏览器本地完成,文件不会上传服务器。
可以上传 .svg 文件,也可以直接把 SVG 源码粘贴到文本框,例如从设计工具里复制出来的代码。输入后会立即校验:判断是否为有效的 SVG 代码、是否包含 viewBox,并给出尺寸与是否为 1:1 正方形的提示——Favicon 建议使用 1:1 图标,不是正方形时会给出提醒但仍可继续。渲染通过图片方式加载 SVG,文件中的脚本不会执行。
尺寸按用途分组。常用尺寸为 16、32、48、180、192、512,默认全部勾选;更多尺寸为 64、128、256,可按需勾选;也可以输入自定义尺寸添加。页面还提供「推荐网站图标」「全部」「清空」三个预设按钮,一次调整到位。各尺寸的用途可以参考页面提示:16 用于浏览器标签页,32 与 48 用于浏览器与 Windows 快捷方式,180 用于 iOS 主屏幕图标,192 与 512 用于 PWA 清单,64 与 128 属于常规图标。
背景默认透明,适合本身就是方形或自带留白的图标;如果源图边缘贴得太紧,或者需要在深色背景下使用,可以选择填充颜色并指定背景色。内边距可以按百分比给图标四周留白(提供 0、5%、10%、15%、20% 等快速值),避免图标顶到画布边缘。所有尺寸共用同一套背景与内边距设置,保证视觉一致。
生成后结果区按用途分块展示:顶部是仿浏览器标签页的预览,用 16 像素实际大小展示图标效果;Favicon 组列出小于 180 的尺寸并说明 favicon.ico 的组成;网站与 PWA 组列出不小于 180 的尺寸。每个尺寸都显示预览、体积与单独下载按钮。下载方式有四种:单独下载某个尺寸、下载全部 PNG(按顺序逐个下载)、下载 favicon.ico(包含多个分辨率的标准图标文件)、打包下载 ZIP(一次给出全部 PNG 与 favicon.ico)。
页面会根据所选尺寸自动生成 HTML 引用代码与 webmanifest 图标段,包含 favicon.ico、各尺寸 PNG 与 apple-touch-icon 的引用写法,复制后粘贴到项目里即可,无需再手写。代码中的路径按站点根目录组织。
生成的 ico 为什么没有 512?ICO 容器对超过 256 的 PNG 条目兼容性较差,工具会自动只把不超过 256 的尺寸写入 ico,512 仍会通过 PNG 单独提供,页面会说明 ico 中实际包含哪些尺寸。
SVG 里的字体没有渲染出来怎么办?浏览器渲染独立 SVG 时不会加载系统外的字体文件,请在 SVG 中把文字转换为路径。
没有选择任何尺寸怎么办?会直接提示至少选择一个输出尺寸。
提示 SVG 无效或渲染失败?通常是代码不完整或标签不合法,可先用设计工具重新导出 SVG 再试。
适合网站与后台系统配置标签页图标、移动端站点配置主屏幕图标、PWA 应用配置清单图标,也适合把任意矢量 Logo 快速转成一套图标素材。SVG 渲染、PNG 编码与 ICO 打包全部在浏览器本地完成,页面没有上传接口,文件不会上传服务器,也不会被保存。
评论 0