When I open up Reeder on my iPad I am always reminded by how many websites do not have a WebClip Bookmark Icon.
Fortunately, setting up a custom WebClip Bookmark Icon is quite easy. Here’s how:
- Create a 129×129-pixel png image titled
apple-touch-icon.png
- Upload it to your website’s root folder:
http://example.com/apple-touch-icon.png
-
That’s it.
This png
file is the image that Reeder will use when listing your site in the feeds folder. And this is the image that iOS will use as the icon when saving your site as a web clip to the Home screen.
So why 129×129? Because that’s the size Apple uses. However, the exact size that the icon should be is debatable. Mine is actually 158×158 pixels (left over from when Nathan Borror suggested that size in 2008). Jeffery Zeldman’s is 120×120 pixels, Marco Arment’s is 128×128 pixels, and 5by5’s is 144×144 pixels, for example.
And, so long as we’re on the subject, here are four of my favorite WebClip Icons. Left to right it’s Zeldman, Blankenship, Kottke, and Van Damme.