Chrome Extension icon not having color

Question

I just create my first Chrome extension. My extension's icon shows correctly (with color) in the extension manager page:

But Chrome shows a grayscale version of my icon in the extension bar:

Here's the manifest of my extension:

{
  "name": "__MSG_appName__",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "__MSG_appDescription__",
  "icons": {
    "16": "images/icon-16.png",
    "128": "images/icon-128.png"
  },
  "default_locale": "en",
  "background": {
    "scripts": [
      "scripts/chromereload.js",
      "scripts/background.js"
    ]
  },
  "permissions": [
    "tabs",
    "http://*/*",
    "https://*/*",
    "contentSettings"
  ],
  "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "js": [
        "scripts/contentscript.js"
      ],
      "run_at": "document_end",
      "all_frames": false
    }
  ]
}

What can I do to make Chrome show my icon with color next to the address bar?

Thanks

Answer 1

That is odd behaviour, I don't know why it's happening but I know the solution: you should be using default_icon instead of icon:

"browser_action": {
    "default_icon": "icon.png"
}

Note that the icon needs to be 19x19 or 38x38 pixels.

You've defined the larger icon correctly though so you could leave that as is.

See here for more info.

Answer 2

Based on my experience and on Noam's answer I'm tempted to say that it is because your extension doesn't have a "browser_action" defined. In other words: its icon is there to show it is installed, but it doesn't do anything, so it had its colors removed.

This is just a guess not confirmed by any documentation or test.