Is Your Site Missing its Custom WebClip Icon?

When I open up Reeder on my iPad I am always reminded by how many websites do not have a WebClip Bookmark Icon.

Missing Apple Touch Icons

Fortunately, setting up a custom WebClip Bookmark Icon is quite easy. Here’s how:

  1. Create a 129×129-pixel png image titled apple-touch-icon.png
  2. Upload it to your website’s root folder:
    http://example.com/apple-touch-icon.png

  3. 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.

Favorite Apple Touch Icons

Is Your Site Missing its Custom WebClip Icon?