OS X icons size

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")

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

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


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];