自动图标：一个图标全尺寸生成

一个图标，N 个尺寸

扩展的 manifest 要声明多尺寸图标：工具栏 16、弹窗 32、商店和详情页 48、128，主题图标还分浅色深色（§25）。手工导出一堆尺寸费时费力，还容易漏。@wxt-dev/auto-icons 就是干这个的：给一张基础图，其余尺寸自动生成。

安装并挂上模块：

npm i -D @wxt-dev/auto-icons

// wxt.config.ts
export default defineConfig({
  modules: ['@wxt-dev/auto-icons'],
});

把基础图标存到 <srcDir>/assets/icon.png（默认位置），构建时模块就会按 manifest 需要的尺寸生成全部图标。SVG 也支持，想要任意尺寸都不糊，就传 SVG。

和手写图标比，省在哪

不用 auto-icons 时，你得准备 16、32、48、96、128 五张图（商店和详情页常用 48 与 128，主题图标还要浅色深色两套），还要保证它们内容一致、比例正确。改一次设计，五张图全部重出。用 auto-icons 后，设计稿只有一份：换图、调色、加圆角，重新构建即可，所有尺寸同步更新，不存在「某张忘了换」的问题。

两点建议：基础图用大尺寸（至少 128 起步），小尺寸由大图缩放而来，清晰度更有保障；如果你自定义了 srcDir（§04），图标路径会跟着变，比如 mkext 项目把 srcDir 设为 src，图标就在 src/assets/icon.png。

mkext 这类真实项目也是一行接入：它的 modules 数组里就有 '@wxt-dev/auto-icons'，其余交给构建。

开发模式下的图标标识

开发时装的扩展和商店正式版长得一样，容易搞混——装错版本排查半天。auto-icons 提供了两个开发期特性：

• 图标变灰（greyscale）；
• 叠加一层可见的标记（overlay）。

开启后，dev 模式加载的扩展一眼就能认出是开发版，正式构建（build/zip 的 production 模式）则自动恢复为正常图标，不用手动开关。同时开多个浏览器构建调试时，这个标识能救命：哪个窗口装的哪个版本，一眼分明。

配置项

模块用 autoIcons 键配置：

export default defineConfig({
  modules: ['@wxt-dev/auto-icons'],
  autoIcons: {
    // 具体选项见编辑器里的 JSDoc 提示
  },
});

每个选项在编辑器里都有 JSDoc 说明，也可以直接读包源码里的 AutoIconsOptions 类型。这是 WXT 模块一贯的配置风格：类型即文档（§31）。需要的话，还能在构建钩子里读解析后的配置做二次定制（§30）。

与 favicon 的关系

别把扩展图标和网页 favicon 搞混（如 §23 所述）：favicon 是网站的小图标，扩展通过 _favicon/ 接口读取，而且只有 Chromium 系浏览器支持；auto-icons 管的是扩展自己 manifest 里的图标。两者用途不同，互不替代。扩展想展示网站 favicon 时用前者（_favicon/ 接口），商店里展示的自家图标靠后者（auto-icons）。

构建完成后，可以到 .output/{浏览器}-{版本}/ 里抽查一下：manifest 的 icons 字段应指向生成好的各尺寸文件（§38 讲过产物检查）。确认无误再打包上架，避免商店拒绝「图标尺寸缺失」的提交。

小结

一张基础图加一行模块配置，全尺寸图标自动到位，开发版还有专属标识。下一节看另外两个实用模块：调度器与后台判断。