0

I'm currently developing a Chrome Extension and trying to upload my icon to the Chrome Developer Dashboard. However, when I upload my icon, the colored-in part looks very transparent. Here is what it looks like once it's uploaded:

Icon I see once the image is uploaded

When I right click and save the image, this is what I end up getting:

enter image description here

Below is the original image I'm trying to upload. It looks fine on my computer, so I'm not sure why it changes transparency when uploaded.

Image I see on my computer

Chrome requires a 128x128 png, and 16px of each side of the icon should be transparent (so the icon looks like it's only 96x96). Here is a reference to those guidelines. I believe I am following those guidelines correctly so that's probably not an issue.

I'm assuming I'm doing something wrong with the transparency values, but I'm not sure exactly. Anyone have any ideas? I created this icon using LunaPic.

closed as off-topic by Scott, Billy Kerr, Paolo Gibellini, Luciano, Lucian Feb 28 '18 at 13:42

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • Despite the fact that it could be a render "issue" of the developer dashboard, and it could be correctly rendered in Chrome Store, I've noticed that your image is an indexed PNG that maybe could cause some problems (altough Google says nothing in its guidelines about it). Have you tried to upload an RGB version one? – Mattia Galati Feb 23 '18 at 13:22
  • Hey! So I was able to solve the issue (see my answer below) but I'm not sure what the root cause was. I'm assuming you're right about it displaying badly because it was an indexed PNG. If you get a chance, can you confirm that the image in my answer is a true RGB image? I'm not sure how to check that using Paint.NET. – nareddyt Feb 24 '18 at 17:46
0

I was able to fix my picture by using Paint.NET instead of LunaPic. I just cropped out my foreground and placed it in a different layer that was fully opaque. Then saved as PNG, now it appears fine online!

View on Chrome Web Store

Here's the icon now:

Icon after being exported from Paint.NET

I'm not sure what the main issue was, but I'm assuming that LunaPic saves the transparency in a different format. @Mattia Galati also mentioned my original image was an indexed image, so that might be it.

  • As you requested, I checked the new image and can say that it's a 32bit, not indexed PNG. You can check yourself by installing either The Gimp or Irfanview and check the image properties. – Mattia Galati Feb 26 '18 at 9:21

Not the answer you're looking for? Browse other questions tagged or ask your own question.