Lullabot Ideas
We know stuff. We empower you to know stuff too.
Module Monday: Touch Icons
Article by Jeff EatonFebruary 13, 2012 - 4:30pm
If you've ever needed to assemble an iPhone or iPad-ready Drupal site on short notice, you know that it's easy to miss some of the details. Once you've finished a responsive design and figured out how to avoid burying mobile users in heavy images, it's easy to forget the high-res Web Clip Icon used by iOS when a user saves your site to their device's home screen. Without one, a squeezed-down screenshot of your site will be displayed on their home screen. It's possible to hard-code a Web Clip Icon into your theme's markup, but with the Touch Icons module, it's as easy as uploading a custom favicon or logo image.
![]()
Installing and enabling Touch Icons adds two additional checkboxes to every theme's settings page. Like the Favorite Icon and Site Logo options, activating them lets you upload a custom image file that should be used as your site's iOS home screen icon. That's it -- there's nothing more to configure or set up!
![]()
Technically, nothing prevents you from customizing your site's theme and embedding these touch icons yourself. If you're using an out-of-the-box Drupal theme, however, it's easy to forget. If you need to add a bit of extra polish for iOS users, this is an easy way.
Touch Icons is simple and problem-free based on our testing, but only the Drupal 6 version has an "official" release available for download on Drupal.org. The Drupal 7 version of the module is only available as a "developer release." If you're interested in helping maintain the module or want to keep track of its status for Drupal 7, check out the module's issue queue.

Comments
Thanks for the feature
Thanks for the feature Jeff! Nice way to start the week. High time I rolled a stable release, then.
Also helps themers
One feature the review doesn't mention is that the module will detect web-clip icons placed in the theme folder, so themers can include them just like the favicon. All that's needed is for the icons to have the right filename. Details are on the module's project page.