Home Screen Icons

Clean up your Apple bookmarks for the home screen by adding an icon to your websites. Right now, the default method of making a home screen button used by Apple's mobile OS is to screen capture the page, then allow you to label the button.

The result is really nasty looking postage stamp sized micro views.

What if you could control that logo? Make a faux app icon so that your website matches the real apps.

Create your icon as a 45 pixel square, and save it as a PNG graphic rather than GIF or JPG. The naming is the key -- "apple-touch-icon.png"

Save the icon into the root directory of your website, and voila. That's all it took for my work on RazorbackFoundation.com. If you have an iPhone, try it and you'll see.

If for some reason your don't have access to the root, or in a virtual directory hosted situation, have your provider load the following line of code into the HEAD section of the index and templates of other pages:

link ref="apple-touch-link" href="/target/ "

(Obviously, add the "<" and ">" at end of the code that I had to remove to make Blogger recognize this is not a piece of code -- note that it is an "open" piece of code that lacks a close tag.)

where the ~target part is the location where the apple-touch-icon.png is saved. This was the solution our provider had to do on ArkansasRazorbacks.com.

If you want to watch a step-by-step video of how to, go to the Adobe Creative Suite Video Podcast and go to the April 13 episode, "Create Custom iPhone/iPod touch home screens."

You'd be shocked at the number of websites and social media types that still haven't taken advantage of this small detail.