multipass
multipass copied to clipboard
canonical
Improved MacOS App Icon
The Multipass MacOS app-icon currently doesn't conform to Apple's Human Interface Guidelines (HIG). [1]
Specifically, it's circular in shape.
As such, it does not integrate well with the current 1st party & 3rd party icon-set.
Here is how Apple describes their latest guidelines for their macOS platform:
MacOS. In macOS, app icons share a common set of visual attributes, including a rounded-rectangle shape, front-facing perspective, level position, and uniform drop shadow.
Use the drop shadow in the icon-design template. The app-icon template [2] includes the system-defined drop shadow that helps your app icon coordinate with other macOS icons.
Consider using interior shadows and highlights to add definition and realism. For example, the Mail app icon uses both shadows and highlights to give the envelope authenticity and to suggest that the flap is slightly open. Shadows and highlights should suggest a light source that faces the icon, positioned just above center and tilted slightly downward.
Avoid defining contours that suggest a shape other than a rounded rectangle. In rare cases, you might want to fine-tune the basic app icon shape, but doing so risks creating an icon that looks like it doesn’t belong in macOS. If you must alter the shape, prefer subtle adjustments that continue to express a rounded rectangle silhouette.
What's your proposed solution? In order to help Multipass feel native to the MacOS platform, I've created a new icon.icns that follows Apple's HIG.
It was designed using Apple's latest template, and exported using https://github.com/jordanbaird/createicns
Multipass on MacOS now fits right in with all 1st party and 3rd party apps:
I hope that the project devs see this thread, and consider this improvement.
MacOS users can update app-icons themselves, by following this guide: https://macosicons.com/#/how-to
Artwork file Download MacOS .ICNS
Additional context Here are the two Apple resources I referenced:
[1] https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/ [2] https://developer.apple.com/design/resources/#macos-apps
Thanks for the input @ONLY78; we are working to get the macOS icons in better shape soon. We have the tray icon ready to go, and I just submitted a request to get a suitable app icon made as well. Once web + design has capacity we will be rolling out our new logo across the board.
I've created an icon using the tools mentioned by @ONLY78. Can you please check if they work? First time using this workflow so best if someone more familiar with it reviews them. https://assets.ubuntu.com/v1/26263075-multipass-app-icon.icns
Screenshot:
I've just checked over your work @lyubomir-popov – correctly output, perfectly sized, looks great.
Hi @ONLY78, thank you for QA'ing this. I used the photoshop template, maybe that's where the difference in shadows stems from. I've redone it directly in sketch, hopefully this matches your version closer: https://assets.ubuntu.com/v1/57178481-multipass-icon-exported-from-sketch-new.icns Can you please compare and let me know.
I've inspected your latest file, again it all looks great (and now identical to my version).
I amended my post yesterday, as after closer inspection of both 1st party and 3rd party apps I realised that there was subtle variance across the board with regards to the drop-shadow, and I attribute this to variance in Apple's templates.
Both the 1st version and the 2nd version are perfectly suitable, though I guess I slightly prefer the more defined drop-shadow present in the latest version. In the end, it just comes down to your personal preference @lyubomir-popov
It's so minor, nobody using the product will know the difference :)
Thanks for looking into this again @ONLY78. Sketch does it with a drop shadow, photoshop wiht a gaussian blur, both use 10px... so any difference would be a matter of the respective app's implementation of drop shadows...
To be honest I think the background colour of the app icon has more of an effect on how the shadow is perceived - white (as in the photos app) makes the shadow look crisper, because of the higher contrast between the shadow and the white. Orange, especially with an orange desktop wallpaper behind it, looks like it blends in because the shadow darkens the wallpaper and it brings it closer to the colour of our icon.
A similar thing happens to the red music app icon, which also looks less crisp than the photo or calendar apps in the screenshot above.
Thank you both for the work and feedback here. I think the new icon looks great! Agreed that the different shadows are quite subtle, the latest version works great from my point of view. I'd say this is ready to go!
Any chance of getting a black&white version of the icon for the tray bar?
The current one looks out of place:
Hi @ralgozino,
Yes, we are currently refreshing our logo and icons and we will have a proper light/dark icon for the status bar.
