Creating Apple Touch Icons

#designProcess  

With Yosemite and iOS8 having just been released, I decided it was time to update the apple-touch-icon for the Kindling web app. FYI: these icons are now being used not just on the springboard for iOS devices, but also as bookmarklet icons for Safari on iOS and Mac.

Screenshot of bookmarklet icons in Safari on iOS and Mac

For this task I jumped right into Illustrator and started drawing. Before too long I had just what I wanted: a solid color with the Kindling glyph. I played around with the sizing a little bit and then I sat back and thought, “that was easy”.

Screenshot of touch icon graphic in Illustrator

But then I started to feel a little uneasy about the graphic I produced. It didn’t quite feel right. I realized I needed to introduce some subtlety to the icon to make it feel a little more natural. So I started playing with some variations:

iPhone springboard with variations of icon artwork

In the end, I made a subtle background gradient using the main brand color #ff8800 which helped introduce a little warmth to the icon. For the flame, I used another subtle gradient (gray-to-white) which made it a little easier on the eyes. Note: the “gray-to-white” gradient on the flame I used was not pure gray. It had a hint of branded orange in it. This made the icon feel more natural because the flame borrowed tones of the surrounding artwork rather than strict gray and white.

Animated gif of Illustrator UI showing how colors were used