If you have a website and love attention to detail, you may want to start prettifying its graphic elements so that it can look good when rendered on the gorgeous new iPad’s Retina display. When I was finishing preparing my site last July, I remembered last minute to insert both a favicon and a Web clip icon. As you know, the favicon is the little 16×16 icon browsers typically display in the address bar and next to the page’s name in a list of bookmarks. (Browsers that support a tabbed document interface typically show a page’s favicon next to the page’s title on the tab, and site-specific browsers use the favicon as desktop icon)¹.

The Web clip icon is the one that is used, for instance, by iOS when you want to place a shortcut icon of a website on the Home Screen of your iOS device. (In Mobile Safari, you tap on the Action icon at the bottom center of the screen and select Add to Home Screen). It is also used by Reeder to display the image for individual feeds. 

I chose two different icons for these purposes. At first I tried using a 16×16 version of my ‘observer’ logo you can see at the top left of my home page, but was too small and looked like a tiny smudge. So I chose the red ‘R’ because it is more distinguishable at that size, and kept the ‘observer’ logo as the Web clip icon. I read on the Web that its size had to be 57×57 to be properly displayed as an iPhone icon, and that the image file should be called apple-touch-icon.png. I did just that and all was fine. 

But on a Retina display? Not that fine. In his recent article, Retina Web Clip Icons and Reeder for iPad, Shawn Blanc writes:

The icon size for the new iPad’s Home screen is 144×144 pixels. Up until last week my site’s Web clip icon was 158×158 pixels (Apple.com’s was, and still is 129×129).

[…]

Even though 158 is still big enough so that a Web clip icon on the new iPad’s Home screen doesn’t get scaled up, it is not, however, big enough to fill the space allotted in the new Retina-version of Reeder for iPad.

Reeder for iPad uses an icon size of 241×241 pixels to display the images for individual feeds.

If you’ve got a Web clip icon linked-to within in your site’s header, or uploaded to your site’s root folder, then Reeder will find and use it. If it’s big enough then it will fill the space, if it’s not big enough then Reeder will center it and it will have a white border. If there is no Web clip icon at all, then Reeder will use your site’s favicon and that will be small and pixelated.

[…]

There are two (yea, three) ways to upload your Web clip icon and make it discoverable:

Upload a PNG file titled apple-touch-icon.png to your site’s root folder. So: http://example.com/apple-touch-icon.png

Upload a PNG (you can call it whatever you like) and reference it directly from within your site’s header code:

<link rel="apple-touch-icon" href="http://example/apple-touch-icon.png" />

 

Or, if you don’t want iOS to automatically add that glossy half-circle effect to your icon, you can reference it as being precomposed:

<link rel="apple-touch-icon-precomposed" href="http://example/apple-touch-icon.png" />

 

You can read more about application icons and custom Web clip icons on Apple’s HIG pages here.

I didn’t know about the ‘precomposed’ trick and it’s a really nice way to get rid of that glossy effect I didn’t like with my Web clip icon. I followed Shawn’s advice and replaced the old 57×57 icon with a 256×256 no-glossy icon, and that should be enough both for the new iPad and for Reeder. Here’s my Web clip icon on my Home Screen in a before-and-after side by side:

The difference is quite noticeable. Happy retinifications!