I’ve been using Silvio Rizzi’s excellent Reeder for iPad for the past several days. It’s far and away the nicest Google Reader application for iPad, and maybe anywhere. One thing that I noticed about it was that for some of the sites in my feed there were big fancy icons, while others were stuck with favicon.ico
ArsTechnica has one of these fancy icons and in the source of their page, I found:
<link rel="apple-touch-icon" href="http://static.arstechnica.com/apple-touch-icon.png" />
Once I had that, the rest was easy. I found an image that I wanted to use, and scaled it to 150 x 150, then saved it as a .png. I uploaded it the root directory on my website and added that line of html to the top of my WordPress theme. According to the Apple documentation, the ideal size for iPhone is 57×57, but it says that the OS will scale it for you if your icon is a different size.
Done and done.
As an added bonus, if someone wants to save your site as an icon on their iPhone or iPad, they will get your fancy icon, instead of a crappy screenshot of your webpage.
via Safari Web Content Guide: Configuring Web Applications.