Specs for app icon for macOS app

Question

Created Jan ’21

Replies 5

Boosts 2

Views 13k

Participants 9

Hello,

The human interface guideline says the macOS app icon must be "Square with no rounded corners."

However, when embedded just a square icon as I read the above, no rounding seems to be applied and my app icon looks oddly square compared to most other apps.

So should I just ignore the requirement and "pre-round" the edges or is there something I need to enable somewhere? I have set "Icon already includes gloss effects" to "NO" in an attempt to apply some processing, to no avail.

Thanks in advance,

Ulrik

Answered by Etresoft in 655260022

Technically, the guidelines say "should" not "must". And obviously that is wrong. It looks like it is just copy-and-pasted from the iOS app icon guidelines. The Whats new in HIG page even shows examples of Apple apps that violate the rounded corner design on purpose. If you go to the Resources page, you can download template files that have the exact specifications you need.

Boost

Answer 1

Etresoft OP

Jan ’21

Accepted Answer

Technically, the guidelines say "should" not "must". And obviously that is wrong. It looks like it is just copy-and-pasted from the iOS app icon guidelines. The Whats new in HIG page even shows examples of Apple apps that violate the rounded corner design on purpose. If you go to the Resources page, you can download template files that have the exact specifications you need.

0

Answer 2

rungxanh2901 OP

May ’21

Yeah I learned this the hard way. We gotta round it off ourselves. Hope Apple would change this soon!

However, I have found and been using this great Figma template, which is really easy to use since it let's you change the corner radius directly.

Check it out

https://www.figma.com/community/file/857303226040719059

2

Answer 3

jakub_a OP

Sep ’22

https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons

"On most platforms, the system applies a mask that automatically adjusts icon corners to match the platform’s aesthetic. For example, watchOS automatically applies a circular mask. The exception is macOS: Although the system applies the rounded rectangle appearance to the icon of an app created with Mac Catalyst, you need to create your macOS app icon in the correct shape."

0

Answer 4

jaredsinclair OP

Dec ’22

Templates are helpful. If you can't find one that works for you, here are the stats that matter to achieve the system-standard rounded corner approach:

The following assumes a reference document of 1024x1024 to do your primary work.

First, if you use Photoshop, use this excellent script by Mike Swanson (blog dot mikeswanson dot com slash iosroundedrect) which can create a shape layer using the proper continuous corner shape. The script arguments should be 824x824 pixels dimensions with a 185.4 corner radius.
Position the shape at the center of the canvas. This should result in exactly 100 pixels of gutter on all four sides.
Add a drop shadow with a 28-pixel radius, a 12-pixel downward Y-axis shift (no X-axis shift), a zero spread, using pure black at 50% opacity.
If desired, experiment with inner highlighting around the margins of the shape layer. Some Apple icons (like Mail) have very subtle, thin highlights to create a softly bezeled aesthetic.

3

Answer 5

DevThoth OP

Apr ’23

With @jaredsinclair instructions i've created an affinity template which you can export for all OSX sizes https://www.icloud.com/iclouddrive/06bSw3AEbCDum_WBX_VpTDOWA#OSX_square_Icon

1