OS X icons sizes for application icons and menu bar icons
cocoa, macos, retina-display
Solution
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:
- NSStatusBar seems to look best with something 18 pixels high, or less. The systemStatusBar has a thickness of 22.
- While it lists PDF format, I've been using png without issue.
- 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];
Problem
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.