[Feature]: Replacement of the icon for an active media display for Windows/Mac OS bars

[mrtavor]

What happened?

-

To Reproduce

-

What did you expect to happen?

-

Version

24.11.5

What platform are you seeing the problem on?

Windows

Relevant log output

No response

Screenshots

Additional context

A second icon was created to represent the second screen in the bottom bar for Windows/Mac OS. This icon matches the app’s style and clearly indicates its purpose. Additionally, the Windows icon was modified by adding more rounding. This ensures uniformly rounded corners across all platforms, contributing to a more cohesive style and looking equally good on both Windows and Mac OS.

All the originals can be found in the project on Figma.

Confirmations

• [X] I confirm that I have read the documentation website.
• [X] I confirm that I have searched through the existing issues to make sure my bug report is not a duplicate.
• [X] I confirm that I have searched through the existing discussions to make sure my bug report is not a duplicate.

[mtdvlpr]

Thank you for your work! Do the Windows icons comply with the Windows app icon specs?

Specifically:

When rounded corners are applied to an exterior curve, use a 2px radius at 48x48. When rounded corners are applied to an interior curve, use a 1px radius instead.

Altough uniformity is important, we should align the icon with each platforms specific requirements.

[mtdvlpr]

Also, the exported Windows icon has a size of 512x513. I think it's due to a small mismatch in the rectangle:

The same applies to the macOS icon. Is this on purpose?

[ux-git]

The same applies to the macOS icon. Is this on purpose?

That's most likely a Figma bug that causes slightly wrong exported image size when the frame is positioned on the frame with X/Y axis decimals. Try to export it once again and let us know if that helps.

Altough uniformity is important, we should align the icon with each platforms specific requirements.

Well, Microsoft's design guides are pretty clear, however we have at least three reasons to adjust the corner radius despite the 2px requirement:

1. They allow themselves to ignore the guidelines in certain cases. Take a look at the folder icon – it's 4px radius for every corner, while most of other icons do indeed have 2px radius: Therefore putting the M³ near this icon, you can clearly see the difference, and honestly even 4px is already better:

2. Just take a look at the Zoom icon on Windows 😆 It's not a good example to follow, but seems like Microsoft has no plans to ban Zoom on the Windows, hehe:

   

3. The M³ is used mostly not on ultra-modern 4K displays that properly display the 2px radius. Instead on 720p and 1080p displays all that targeted 2px radius simply becomes a single pixel, making the icon just a sharp square.

That's why we propose to increate the corner radius on Windows as well, because while testing the app in the Kingdom Hall on brand-new 1080p display the icon was visually simply square-shaped. So the first suggestion would be to increase the radius to 4px to make at least some visual difference between sharp and rounded corners, and the next option would be to inherit the macOS radius, which would be near 9px, or we can set the 8px to make it more correct, while still making the app icon consistent across platforms. Considering that Microsoft provides guidelines as a good starting point for overall consistency, I think that the radius is a matter of app devs choice. Moreover, the icon of Meeting Media Manager is already better than 90-ish% of all the Windows apps, that completely ignore the guidelines, design taste or even using the old 16x16px icon scaled up resulting in the Minecraft-style icon in 2024 😁 @sircharlo what direction would you pick?

[mtdvlpr]

That's most likely a Figma bug that causes slightly wrong exported image size when the frame is positioned on the frame with X/Y axis decimals. Try to export it once again and let us know if that helps.

The Windows icons are now correctly sized! The macOS icons are still off: 1666x1664.

Well, Microsoft's design guides are pretty clear, however we have at least three reasons to adjust the corner radius despite the 2px requirement:

Thank you for explaining it so clearly! I that case, I'm all for it. I prefer the 4px radius over the 2px radius as well :)

[ux-git]

The macOS icons are still off: 1666x1664.

And now? I found and fixed one more decimal-position layer

[mtdvlpr]

The macOS icons are still off: 1666x1664.

And now? I found and fixed one more decimal-position layer

Am I supposed to export the 1024x1024 box with the spacing around the icon or the 832x832 box with the icon filling the entire box?

[ux-git]

@mtdvlpr yes, the 1024px container

[mtdvlpr]

@mtdvlpr yes, the 1024px container

Then it exports correctly! So the icns file should be generated from the macOS spaced assets and the png and ico should be generated from the Windows versions?

[ux-git]

Yes, pretty much. Figma doesn't have the built-in .ico export if you need it. You can use any of the available plugins in the Figma to do so, or let me know and I'll export them for you

[mtdvlpr]

I have updated all assets. If you could verify for me, that would be great! They're located here. A test build is underway here.

[mtdvlpr]

Yes, pretty much. Figma doesn't have the built-in .ico export if you need it. You can use any of the available plugins in the Figma to do so, or let me know and I'll export them for you

I think I lack permissions to use plugins in the figma file. I've used the Quasar Icon Genie. Let me know if the icons are not correctly generated.

[ux-git]

@mtdvlpr the macOS one looks great. @mrtavor will take a look on his Windows machine and will provide his feedback soon

[mrtavor]

Fire 🔥