Chrome 扩展的 logo 可能在一个位置清晰锐利地显示为 128 像素，到了工具栏却糊成一个模糊的方块。这通常说明资源尺寸设置有问题，而不是品牌标识本身有问题：正确选择 Chrome extension icon sizes，意味着要把工具栏、扩展本身和商店展示图视为相互关联、但用途不同的资源。
这些资源并不是网站 favicon。HTML Standard 将 rel='icon' 定义为一种页面链接关系；扩展则在 manifest.json 中声明图标，也可以另外定义 action artwork。如果你还需要网站图标，我们的 favicon 尺寸指南 会介绍那套独立配置。
Chrome extension icon sizes：每种资源分别负责什么
对扩展而言，图标尺寸是为不同 UI 和打包场景提供的文件所对应的像素尺寸。尺寸本身不能决定资源放在哪里；真正决定放置位置的是 manifest 属性，以及发起请求的界面。
- Manifest artwork：在顶层
icons对象中声明的通用扩展资源。应让这组用于标识扩展的资源保持一致。 - Action artwork：工具栏标识；当它需要与通用图标不同时，通过
action.default_icon提供。 - Store artwork：为 Chrome Web Store 上架流程准备的 128x128 PNG。应将其视为单独的交付物，不要想当然地认为扩展包会提供全部上架资源。
一套保守的基准尺寸是 16x16、24x24、32x32、48x48 和 128x128 像素。这些是建议采用的工作尺寸，并不是一套对所有场景都适用的显示规则。
为什么扩展图标尺寸很重要
图标一小，细节就容易消失。细小文字、纤细线条和复杂标识到了 16 像素可能糊成一团色块。如果缺少某个精确尺寸的文件，浏览器就必须缩放一张可用图片，而这种回退处理可能让图标显得发虚或模糊。
一套实用的图标集，应该把用途和分辨率区分开：为工具栏的高密度布局准备紧凑版本，为扩展的各类通用界面准备风格一致的图标系列，再为商店展示准备高分辨率方形图。这样每次导出都有明确用途，不必再依赖同一个超大文件去适配所有位置。
如何在 manifest.json 中构建图标集
在 Manifest V3 中，icons 对象的数字键用于声明所引用文件的像素尺寸。路径以扩展程序根目录为基准，并且必须与文件名完全一致，包括字符大小写。下面这个较为稳妥的示例，将扩展识别用图标与工具栏图标分开：
{
"manifest_version": 3,
"name": "Sample Extension",
"version": "1.0.0",
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
},
"action": {
"default_title": "Run Sample Extension",
"default_icon": {
"16": "images/action-16.png",
"24": "images/action-24.png",
"32": "images/action-32.png"
}
}
}icons 对象为 Chrome 提供多种通用尺寸的图标资源。default_icon 映射则提供 16、24 和 32 像素的紧凑工具栏版本；在空间有限的情况下，简化标识可能比完整 Logo 更容易辨认。如果不设置 action 专用图标，通用图标可以作为回退图标，因此声明工具栏图标组能让你更精确地控制视觉呈现。
不要把网站 favicon 的写法照搬到 manifest 中。sizes 属性应写在 HTML 中，例如 <link rel='icon' sizes='32x32' ...>，而不是放进 JSON 映射。同样，能作为 favicon 使用的 .ico 文件并不一定适合作为扩展程序资源；PNG 则是更稳妥的打包格式。
保持扩展图标一致性的最佳实践
- 先按 16 像素设计。 将图形收敛为清晰的轮廓、有限的配色，并确保其中的形状在浅色和深色工具栏中仍然清楚可辨。之后再细化更大尺寸的导出文件。
- 按视觉重心居中。 即使数学上的留白完全相同，图形也可能显得偏低或过于拥挤。把每个版本放进实际工具栏尺寸的预览中逐一比较。
- 文件尺寸要匹配。 名为
icon-32.png的文件应为 32x32 像素，manifest 中的 key 也应设为32。同时检查打包路径。 - 保持统一的视觉体系。 工具栏、扩展管理页和商店展示图应共享相同的几何结构和配色，即使最小尺寸版本移除了装饰。
- 核对你实际打包的内容。 加载解压版扩展，检查
chrome://extensions，确认 ZIP 中包含所有被引用的图片。修改后重新加载扩展。
使用 Mzu favicondl 从干净的 SVG 或 PNG 源文件导出各个 PNG 变体。如果网站还需要 favicon，favicon HTML 代码指南 会介绍另一套独立的 markup 写法。
如果安装后图标缺失，先检查 JSON 语法，再核对文件、路径和尺寸。刷新底层网页并不一定会重新加载已打包扩展的 metadata，因此测试时应使用扩展的 reload control。
结论：发布一套有明确规划的图标组合
Chrome 扩展的图标尺寸很重要，因为工具栏、扩展管理界面和商店场景各自有不同的视觉预算。一套实用的 16、24、32、48 和 128 像素 PNG 组合，可以让 Chrome 在每个位置使用精确对应的源图，而不是把同一个文件强行塞进所有槽位。把这些尺寸视为可维护的基线，发布前检查当前的 Chrome Web Store 上传规则，并将扩展图标与网站 favicon 分开。