32

What size should an application icon and menu bar icon for OS X be?

I can deal with small resolution displays but what about Retina - does an icon displayed on the menu bar (e.g. 20 x 20 ) will be smaller or blurred on a new MacBook Pro with Retina display? I reckon that the Application icon will be scaled, so if I'll prepare twice larger than regular it should be OK on Retina.

I found an excellent guide for iOS development with sizes specification but I can't find similar size specifications for OS X.

pkamb
  • 33,281
  • 23
  • 160
  • 191
maseth
  • 841
  • 1
  • 11
  • 19

6 Answers6

43

NSStatusBar icons (i.e. Menu bar icons) are different from regular app icons. I have not been able to find an NSStatusBar official icon guideline, but I have to believe that the Toolbar Icon guideline for buttons is pretty close. It suggests:

  • Create icons that measure no more than 19x19 pixels.
  • Make the outline sharp and clear.
  • Use a straight-on perspective.
  • Use black (add transparency only as necessary to suggest dimensionality).
  • Use anti-aliasing.
  • Use the PDF format.
  • Make sure the image is visually centered in the control (note that visually centered might not be the same as mathematically centered).

In testing, I've found:

  1. NSStatusBar seems to look best with something 18 pixels high, or less. The systemStatusBar has a thickness of 22.
  2. While it lists PDF format, I've been using png without issue.
  3. If you want your icon to be white on blue when it's selected, you need to provide the alternateImage as a separate white version of your icon.

Code sample:

myStatusItem = [[NSStatusBar systemStatusBar]statusItemWithLength:NSSquareStatusItemLength];
NSImage *statusImage = [NSImage imageNamed:@"Status.png"];
[myStatusItem setImage:statusImage];
NSImage *altStatusImage = [NSImage imageNamed:@"StatusHighlighted"];
[myStatusItem setAlternateImage:altStatusImage];
[myStatusItem setHighlightMode:YES];
[myStatusItem setMenu:self.myStatusMenu];
DenVog
  • 4,226
  • 3
  • 43
  • 72
  • There's no need for alternate image if you're using a template image. If image name ends in "Template" then it will be drawn white on blue automatically. – pointum Sep 01 '14 at 12:20
  • If image name doesn't end with 'Templete', alternatively you can set `[[myStatusItem image] setTemplate:YES];` then it will be drawn white on highlighted mode. – jeevatkm Jun 03 '15 at 22:27
  • Simply use "xxxTemplate.png" and "xxxTemplate@2x.png" as the tray icon name, then everything will be set up automatically. This is the perfect way to do it. – RRN Jan 05 '17 at 15:06
12

To make your menu item support Retina displays, Dark Mode and different states (e.g. pressed)

  1. Create two PNG images sized 16x16 and 32x32 pixels
  2. Create a new image asset in Xcode with Render As set to Template Image and add your images for 1x and 2x
  3. Initialize your NSImage from the image asset without changing its size: NSImage(named: "Example")
John
  • 964
  • 8
  • 21
7

http://developer.apple.com/library/mac/#documentation/userexperience/conceptual/applehiguidelines/Intro/Intro.html#//apple_ref/doc/uid/TP30000894-TP6

And: http://developer.apple.com/library/mac/#documentation/userexperience/conceptual/applehiguidelines/IconsImages/IconsImages.html

enter image description here

Blazer
  • 14,259
  • 3
  • 30
  • 53
  • 1
    I agree about icons sizes- thx a lot - but what about NSStatusMenu icon size? – maseth Oct 03 '12 at 19:17
  • 1
    These icons should be 18x18 pixels in size, and should be done as PNGs so you can get the transparency you need. – Blazer Oct 03 '12 at 20:26
  • @NathanSakoetoe If these icons are created at 18x18, they are not clear on a retina display. They need to be bigger, but I do not know the proper size. – Mike Pelley Apr 13 '15 at 20:54
  • @NathanSakoetoe Yes, and it's also the number two hit on google for NSStatusBar icon size today so many folks will reference it. – Mike Pelley Apr 17 '15 at 06:07
4

Follow these steps and you will get a perfectly sharp status bar Icon for retina

  1. Open a png file of your Icon in photoshop it should be larger than 88px x 88px
  2. go to menu, Image, Image size
  3. set resolution to 350
  4. set size to 88px x 88px (pixels)
  5. save image as png add it xcode
NSGodMode
  • 599
  • 1
  • 6
  • 16
-2

adding on to Michael's answer apple are now requiring all the way up to 1024x1024px icons due to retina displays.

http://www.cultofmac.com/179738/apple-now-requires-high-res-1024x1024-icons-for-every-mac-os-x-app/

Johnnykrisma
  • 77
  • 2
-3

The maximum size for the app icon should be 1024 x 1024.

And you have to create both regular and retina resolution icons for 16 x 16, 32 x 32, 128 x 128, 256 x 256, 512 x 512 & 1024 x 1024.

The details for which you can find in the "High Resolution Guidelines for OS X" document from Apple.

Michael Dautermann
  • 88,797
  • 17
  • 166
  • 215
  • What about size of NSStatusItem icon. I cant find the proper size anywhere, Thanks for the "High resolution guideline for OS X" – maseth Oct 03 '12 at 18:59
  • @mason - good question about `NSStatusItem` icon, you can use a PDF (e.g. see ) for that one – CRD Oct 03 '12 at 19:03
  • Ok, I found [OSXHIGuidelines](https://developer.apple.com/library/mac/documentation/userexperience/Conceptual/AppleHIGuidelines/OSXHIGuidelines.pdf) on page 116 "Creating Great Icons for Any Resolution" BUT stil no word about Menubar icon size. – maseth Oct 03 '12 at 19:05
  • I really want to say it's 16 x 16 (and probably 32 x 32, or 16 x 16 at Retina resolution), but I haven't yet found the Apple-hosted reference page that states it definitively. The icon has to be less than the height of the menu bar, though, which is defined in "`[NSMenu menubarHeight]`". – Michael Dautermann Oct 03 '12 at 19:25
  • @MichaelDautermann - I think space available is 20 x 20, but 18 x 18 with 1 or 2 pixels blank at top aligns correctly (that's from an actual icon, can't remember offhand where I found the size from) and I assume the "@2x" system should work but haven't tested it. But PDF seems a good option here as well (you need to set the size of the image in points before using and it will adjust for retina resolution automatically). – CRD Oct 03 '12 at 22:51
  • On apple official spec pages: Note: There is no longer a 1024x1024 size. That’s replaced by 512x512@2x. – Flavien Volken Oct 19 '14 at 13:11