I have validated the extension‘s json file. But the icon is not showing up in edge. How do I fix that?

Question

My previous question.

The answer quite helped, but I am still having trouble with the icon.
It shows up as an common puzzle icon in edge, but I need it‘s icon to change.

It looks like:

I have validated it with this, but it shows as "valid".
till now, I‘m at:

{
   "name": "The hey say extension",
   "version":"0.0.0.1",
   "manifest_version":2,
   "description":"I say “hey”, when you click on me!",
   "browser_action":{
      "default_popup":"HeySay settings and play.html", 
     "default_icon":"HeySay icon!🙂.png" //this is not working
   }
}

can anyone leave the required code as an answer? thanks.

Note: Don‘t recommend "default_icon": , because I tried that, and it simply doesn‘t work.
Also, making extensions and manifests need a programming head! I have one, but edge is creating serious problems.

Answer 1

The compatibility table at MDN has the following note for Edge/default_icon (emphasis mine):

Partial support

SVG icons are not supported.

'default_icon' must be an object, with explicit sizes.

So you must use the alternate form that specifies sizes (or at least a single size):

   "browser_action":{
      "default_popup":"HeySay settings and play.html", 
      "default_icon": {
        "32": "HeySay icon!🙂.png"
      }
   }

The size of 32 seems to be guaranteed to be supported; your icon should be scaled down to fit. If you specify the actual dimensions (53) it might not work.

Of course, it's best if you actually have icons for at least sizes 32x32 and 64x64 in those exact resolutions.