Developer Tip: 30×30 (60×60) is still a good custom UITabBarItem size

icon_30x30

Working with UITabBarControllers is fun. Once you get the hang of making UIViewControllers in your storyboard, Ctrl+drag linking them to your UITabBar is quick and easy. But chances are you will want custom tab bar icons. Here are some tips:

1. Icons should be 100% white with a transparent background

Even the updated iOS HIG says this. Use a PNG.

2. Make the high resolution version fit in a 60×60 rectangle

The docs will tell you that you have a 96×64 max size, but this not only doesn’t look great but it is just too large for most cases. Begin creating your art to fit in a 60×60 rectangle. Then, top-align and horizontally-center the content in a 100×100 canvas:

icon_centering

The resulting icon will be neatly centered with room at the bottom for the bar item title.

3. Save the high resolution first as “filename@2x.png”

As discussed in other tutorials, Interface Builder will do some magic for you. Save your high res version first with “@2x.png” at the end of the filename. Next, scale the image down to 50×50 and save again as just “.png”.

Note: if you are using Adobe Photoshop CC you can use the awesome Adobe Generator syntax to automatically render out both versions of the assets as you update the graphics automatically.