Retina Web Clip Icons and Reeder for iPad

Thanks to the new iPad’s Retina display, it’s possible that you need to update your website’s custom Web clip icon.

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). I’d been using 158 because of Nathan Borror’s suggestion from way back in 2008 — it was a size that seemed scaled well on both iPads and iPhones.

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.

Web Clips in 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.

A few days ago I updated this site’s Web clip icon to be 300×300 pixels.

It looks great in Reeder, and it looks good as a Home screen icon on new and old iPads and on the iPhone 4/4S.

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.

Retina Web Clip Icons and Reeder for iPad