iPhone/iPod Touch icons in Drupal

This website uses the Touch Icons module, which enables Drupal site administrators to configure iPhone/iPod Touch icons on a global and/or per-theme basis.

Use your browser's 'view source' to inspect the <link> elements in the HTML <head>, and try out the icons on your iPhone or iPod Touch by pressing the "+" control to save a Web Clip on your homescreen.

You can use the Switch Theme selector to see the effect of different settings...

  • Garland is using the default blue icons provided by the Touch Icons module.
  • A modified version of Stark theme includes grey icons as theme-provided default icons.
  • Strange Little Town is using custom magenta icons which have been uploaded using that theme's own settings page.

Notes for 6.x-1.0-beta1 Users

The module does not quite work out of the box. After enabling the module, you will have to visit the theme settings pages, as follows...

  1. Enable the module.
  2. Visit the global theme settings page (admin/build/themes/settings)
  3. In the "Toggle display" fieldset, check the iPhone/iPod touch icon check-boxes
  4. Scroll down to the "iPhone/iPod Touch icon settings" fieldset, and...
    • Check the boxes to use the default icon, or
    • Specify a path to a custom icon, or
    • Upload a custom icon.
  5. Optionally, repeat the process for specific themes.

Please keep in mind this is a beta release. I still have to finalize how default settings will provided.

Module-provided default icons use this markup:

(URL paths to the module)

<link rel="apple-touch-icon" type="image/png" href="/sites/all/modules/touch_icons/apple-touch-icon.png"/>
<link rel="apple-touch-icon-precomposed" type="image/png" href="/sites/all/modules/touch_icons/apple-touch-icon-precomposed.png"/>

Theme-provided default icons use this markup:

(URL paths to the theme)

<link rel="apple-touch-icon" type="image/png" href="/sites/all/themes/stark_touch_icons/apple-touch-icon.png"/>
<link rel="apple-touch-icon-precomposed" type="image/png" href="/sites/all/themes/stark_touch_icons/apple-touch-icon-precomposed.png"/>

User-specified custom icons use this markup:

(Custom icons are stored in the drupal files directory)

<link rel="apple-touch-icon" type="image/png" href="/sites/default/files/touch_icons/strange_little_town_apple-touch-icon.png"/>
<link rel="apple-touch-icon-precomposed" type="image/png" href="/sites/default/files/touch_icons/strange_little_town_apple-touch-icon-precomposed.png"/>

Syndicate content