Chrome扩展manifest.json中default_icon与icons属性的区别

一、根级别icons属性 #

• 这是扩展的全局图标配置，负责定义扩展在浏览器各处的通用标识
• 展示场景包括：
  • Chrome扩展管理页（chrome://extensions/）里的扩展卡片图标
  • Chrome应用启动器中的扩展入口图标
  • Chrome应用商店里的扩展列表展示图标
  • 扩展请求权限时弹窗里的标识图标
• 建议配置多尺寸（比如16、32、48、128px），Chrome会根据不同场景自动适配最合适的尺寸

二、action字段下的default_icon属性 #

• 这是专门给浏览器右上角工具栏按钮用的图标配置
• 展示场景就是：Chrome右上角扩展工具栏里的那个点击按钮图标
• 除了默认配置，还能通过chrome.action.setIcon() API动态切换这个图标（比如扩展状态变化时换图标）
• 同样支持多尺寸配置，Chrome会根据工具栏的显示密度自动匹配对应尺寸

核心区别总结 #

1. 用途范围不同：根级icons是扩展全局通用的标识，action.default_icon仅服务于工具栏按钮
2. 展示场景完全分离：两者各自对应浏览器里不同的展示位置，各司其职
3. 优先级与 fallback：如果没配置action.default_icon，Chrome会自动从根级icons里选合适尺寸的图标作为工具栏按钮的默认图标

配置示例 #

{
    "name": "Chrome Extension",
    "description": "desc",
    "version": "1.0.0",
    "manifest_version": 3,
    "action": {
        "default_popup": "index.html",
        "default_icon": { 
            "16":  "favicon-16x16.png",
            "32":  "favicon-32x32.png",
            "64":  "favicon-64x64.png"
        }
    },
    "icons": { 
        "16":  "favicon-16x16.png",
        "32":  "favicon-32x32.png",
        "64":  "favicon-64x64.png"
    },
    "content_scripts": [{
        "css": ["style.css"],
        "matches": ["https://www.google.com/*"],
        "js": ["script.js"]
    }]
}

内容的提问来源于stack exchange，提问作者oosh