Chrome Extension: Programmatically setting browser action icon causes the icon to pixelate

Question

I tried to change the browser action icon in background.js using the following code

chrome.browserAction.setIcon({path: "img/logo-off.png", tabId:tab.id});

However, this is causing the icon to be pixelated really bad (flappy bird style).

Has anyone had the same problem? How should I solve it.

Answer 1

I just finally got my hands on Chrome 38 on a high-DPI Windows screen, and it shows the same behavior.

For high-DPI screens, you need to provide higher-resolution icons, and update the icon providing alternatives:

chrome.browserAction.setIcon({
  path: {
    19: "img/logo-off.png",
    38: "img/logo-off-hidpi.png"
  },
  tabId: tab.id
});

Chrome will select appropriate image based on screen DPI. It currently supports only 19x19 and 38x38 scales.

Edit (June 2016):

Chrome appears to be moving towards Material Design for its toolbar, and that changes browser icon requirements to 16x16 (32x32 for HiDPI). It's advised to provide those as well to be ready for the switch (which already happened in Linux, intentionally or not).