Lullabot Ideas

We know stuff. We empower you to know stuff too.

Module Monday: Touch Icons

Article by Jeff Eaton

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.

Screenshot of administration screen

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!

Screenshot of a site's touch icon

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.