Designing for the iPhone (part 1)

I had such a good time designing the Blog It for iPhone web app that I've decided to optimize my blog for the iPhone as well and document it here.

First step: create an iPhone favicon.

The way to add an iPhone favicon for your site is to create a 57px by 57px image called apple-touch-icon.png and upload it to the top level of your site. Don't give the image rounded corners or a gradient because the iPhone adds those things automatically. That part's easy enough, but the real challenge is creating an image that looks good when given the iPhone icon treatment. As you can see I went through several iterations before deciding on the final version.

The first one seemed to lose all the details and just looked kind of dull. The second was better, but the points of the logo get lost in the rounded corners and gradient. With the third one I moved the logo too far to the bottom-right. It looked like it was trying to hide. The fourth one was almost right, but I had to adjust it down a bit to make it look evenly spaced.