Setting a site icon for iPhone and iPad using the apple-touch-icon rel tag.

After doing some research on how to make custom iOS springboard icons we found this solution that works pretty well. By the way, when iOS (iPhone, iPad, iPod Touch) displays your application icon on the Home screen of a device, it automatically adds the following effects: rounded corners, drop shadow, and reflected shine.

iPhone 2G/3G/3GS/Touch 57×57 pixel PNG file.
iPad 72×72 pixel PNG file.
iPhone 4/4S 114×114 pixel PNG file.
New iPad 3 144×144 pixel PNG file.

[php]
[/php]

If you want to force iOS to not add in the rounded corners and other treatments to the icon you can add: -precomposed to the end of the rel for each like so:

[php]
[/php]

We’re mainly a Genesis shop here at Tucker.pro so we used the Genesis Simple Hooks plugin to add in the code above to the wp_head Hook area in that plugin screen. We’re storing these images in the images directory in our child theme’s directory.

[php]</pre>
[/php]

On the bottom right in the image below you can see our icon.

For portability sake, you may want to put this in your web root or upload them using the WordPress media uploader and specify those urls below. There is some good reasons to put them in your webroot, http://mathiasbynens.be/notes/touch-icons outlines the reasons why you’d want to do this but thats outside the scope of this posting.

Let us know in the comments what you’ve done for something like this on your client projects.

About Jason Tucker

Jason brings 15+ years of hands-on experience as a web developer and systems administrator at large corporations and businesses in the fields of healthcare, manufacturing, technology and entertainment. Specializing in PHP coded sites most of his recent projects are built using WordPress CMS.