Advertisement


iOS iPhone App Hamburger Menu Button Size


Question

I've decided to add a Hamburger Menu on my new iOS iPhone Application. So in order to successfully implement that I need to prepare few images specially for the Hamburger button.

But I couldn't find specific sizes which are suitable for this. Can anybody guide me? Currently I have designed images in following sizes:

  1. 44px - @1x.png

    enter image description here

  2. 44px - @2x.png

    enter image description here

  3. 66px - @3x.png

    enter image description here

2016/11/10
1
2
11/10/2016 3:51:00 PM

The sizes for custom navigation bar icons are listed in the iOS Human Interface Guidelines here: iOS Human Interface Guidelines — Custom Icons

The sizes are listed as:

iPad Pro, iPad, iPad mini         About 44px by 44px
iPhone 6s, iPhone 6, iPhone SE    About 44px by 44px
iPhone 6s Plus, iPhone 6 Plus     About 66px by 66px

The difference is because the iPhone 6[s] Plus uses the @3x resources while the others use the @2x images. So your @2x and @3x sizes are correct, your @1x image should however be half the size of your @2x image.

From iOS Human Interface Guidelines — Image Size and Resolution:

enter image description here

...

A standard resolution image has a scale factor of 1.0 and is referred to as an @1x image. High resolution images have a scale factor of 2.0 or 3.0 and are referred to as @2x and @3x images. Suppose you have a standard resolution @1x image that’s 100px by 100px, for example. The @2x version of this image would be 200px by 200px. The @3x version would be 300px by 300px.

Now, there aren't many iDevices left that use @1x images that you're likely to support so it may not practically be an issue, but it's something you should be aware of.

2016/11/10
3
11/10/2016 3:49:00 PM