Setting Up Apple Touch Icons

I love my iOS devices because they have all kinds of cool features that make it fun to work with. One of my favorites is that it supports saving a website to the Home Screen. It's accessed by clicking the arrow in the center of the bottom bar and then clicking on the "Add to Home Screen" button.

The only problem is that by default iOS creates a thumbnail of the site and sometimes it's not the best image to be using (see the picture above). It really doesn't tell us anything about the site and doesn't stand out on the Home Screen. We're going to fix that.

The first step is that we need to create a 144x144 png and a 114x114 png. We'll name these apple-touch-icon-144.png and apple-touch-icon.png and place them in our img directory. Then we're going to add the following lines to our :

<link rel="apple-touch-icon" href="/img/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="57x57" href="/img/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="114x114" href="/img/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="/img/apple-touch-icon-144.png">
<link rel="apple-touch-icon" sizes="144x144" href="/img/apple-touch-icon-144.png">

I know it's a lot to add but it allows us to specifiy the images that the iOS devices are going to use. The other option is putting FIVE images in our directory.

Now when we add our site to the Home Screen we get a much nicer display.