macoscocoaretina-display

OS X icons sizes for application icons and menu bar icons


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.


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:

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