无需登录 数据私有 本地保存

浏览器扩展图标生成 - 多尺寸一键输出

17
0
0
0

浏览器扩展图标生成器

上传一张图片,一键生成 Chrome / Edge / Firefox 扩展所需的全部图标尺寸

拖拽图片到此处或点击上传

支持 PNG / JPG / WebP / SVG — 建议上传至少 256×256 的正方形图片

16×16
工具栏图标
32×32
Windows 图标
48×48
扩展管理页
96×96
Windows @2x
128×128
商店展示
256×256
高 DPI 显示
常见问题与知识点

Chrome 扩展 (Manifest V3) 推荐使用:16×16、32×32、48×48、128×128。其中 16×16 用于浏览器工具栏(favicon 区域),32×32 用于 Windows 系统托盘,48×48 用于扩展管理页面(chrome://extensions),128×128 用于 Chrome Web Store 展示及安装提示。此外,96×96 和 256×256 可覆盖高 DPI 屏幕(如 Retina 显示屏 @2x)。

Firefox 扩展Edge 扩展 的图标尺寸要求基本一致,使用本工具生成的 6 个尺寸即可全面覆盖。

  • 格式:推荐使用 PNG(支持透明背景),也支持 JPG、WebP、SVG 等常见格式。
  • 尺寸:建议上传至少 512×512 的正方形图片,最低不低于 256×256。如果图片小于目标尺寸,放大后会变模糊。
  • 比例:建议使用 1:1 正方形图片。若上传非正方形图片,工具会自动居中裁剪。
  • 内容:图标主体应居中,边缘留出适当安全边距(约 10%-15%),避免在圆角裁切时被切掉。

manifest.json 中使用 "icons" 字段,格式如下:

"icons": {
  "16": "icons/icon-16.png",
  "32": "icons/icon-32.png",
  "48": "icons/icon-48.png",
  "128": "icons/icon-128.png"
}

此外,"action" 中的 "default_icon" 也可以配置工具栏图标的专属尺寸。本工具生成的 manifest 配置代码块可直接复制使用。

这通常是因为缺少高 DPI 版本的图标。现代屏幕(如 Retina 显示屏)的像素密度是普通屏幕的 2 倍甚至 3 倍。如果只提供 16×16 的工具栏图标,在高 DPI 屏幕上会被拉伸而变模糊。解决方案是同时提供 32×32(@2x)甚至 48×48(@3x)的图标。Chrome 会自动根据屏幕像素比选择合适的尺寸。本工具生成的 32×32 尺寸即可作为工具栏图标的 @2x 版本。

图标配置方面基本没有区别,"icons" 字段的格式在 V2 和 V3 中完全一致。主要区别在于 V3 引入了 "action" 替代 V2 的 "browser_action""page_action",但其中配置图标的 "default_icon" 用法相同。建议新项目直接使用 Manifest V3。Chrome Web Store 目前已不接受新的 V2 扩展提交。

ZIP 包中包含 6 个 PNG 图标文件(icon-16.png ~ icon-256.png)以及一个 manifest.json 示例文件。解压后可直接将图标放入扩展项目的 icons/ 目录,并参考 manifest.json 中的配置。所有图标均为 PNG 格式,保留原图的透明度信息。