On August 18, 2011, About the Inn published a Blog Post titled:
Custom Button Icons for Apple’s iDevices [See Post]
We had a handful of customers ask us to look into these Touch Icons and this is what we've found.
Initially Touch Icons (Originally called “WebClip Bookmarks”) were released in January of 2008. By default, these icons used a screen thumbnail snapshot of the page being “saved”. Then Apple added a mechanism for site owners to specify an icon to be used instead of the screen thumbnail snapshot. [Resource]
The About the Inn article is full of great information, though I do have a few additional notes that I’d like to share:
1 – Touch Icons only work on Mobile Sites. To install a Touch Icon you must have access to the Mobile site code folder. If you had a 3rd party company create a Mobile Site for you, which is not installed according to Mobi Standards, you may or may not be able to install a Touch Icon.
2 - It is NOT necessary to edit the Mobile site header section to include the Touch Icon. When your programmer uses default naming conventions, the iPhone will automatically bring up the image. It works very similarly to the Favicon install. [Learn more about Favicons]
a) Because Mobile sites should be made with small, quick-to-load files, and adding any extra code simply makes them larger when they don’t need to be. IE: It’s a more elegant install.
b) By default, it allows the user to save the ICON when viewing ANY page of the Mobi site.
Step by Step: How do Touch Icons Work on an iPhone?
If you already have a Mobile site, and are interested in creating a Touch Icon to compliment your site, please contact Sharon Rowe at firstname.lastname@example.org.
If you don't already have a Mobile site, installed as per Google Requirements, and built as per Mobi standards, we recommend you learn more about the benefits of providing your guests a Mobile site when they are searching on a Mobile device. [Watch the Video]
If you've already done your investigation on Mobile sites, and are ready to move forward, please contact Sharon Rowe at email@example.com to request a Mobile Bid and Starter Kit.
President and Co-Founder
Acorn Internet Services
You say above that Touch icons only work on mobile sites, and what I think you meant is Touch icons only work on mobile devices. I have a Touch icon on my regular website as well as my mobile site, so that when my full website is viewed by a device like an ipad, that does not always view the mobile version, the user can also utilize my Touch icon just like you show above.
We really love our Acorn-designed Mobile Site and our just-released Touch Icon. Thanks for both!
To clarify: Acorn-IS is only installing Touch Icons for customers who have Mobile Sites. The Touch Icons also appear on an iPad when defaulting to the full website view (IE: not auto forwarded to the mobile site) Though it is possible to attach a Touch Icon to a Full Website view when no Mobile site is present, it is not something we recommend.