Blurry icons in Excel 365 JS add-in

Question

Our team proceeds with developing an JS add-in for Excel 365 Online and Desktop.

We noticed that the icons in add-ins ribbon look blurry on retina displays. For example, look at Script Lab add-in ribbon screenshot. It is noticeable that the icons are blurry too.

Is there a way to specify a separate url for images for retina in the manifest.xml file?

Maybe, it is possible to specify the other size for the pictures for the retina displays (i.e. for non-retina screen we will show icons with a size 32x32px, and for retina we will show 64x64px images)?

Thank you in advance!

Answer 1

You can define bigger icons in the manifest file. See the Sizes section for the supported dimensions:

We recommend that you produce each icon in all these sizes to support high DPI devices. The absolutely required sizes are 16 px, 20 px, and 32 px, as those are the 100% sizes.

16 px, 20 px, 24 px, 32 px, 40 px, 48 px, 64 px, 80 px, 96 px

Answer 2

Consider using the High Resolution Icon Url in the manifest to control the image that is used to represent your Office Add-in in the insertion UX and Office Store on high DPI screens

More here