Creating Apple Touch Icons

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.

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”.

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:

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.