Responsive web design illustration

What is an apple touch icon? It's basically the same thing as the good old favicon.ico. Only it is specifically targeted for Apples iOS devices. This is how you add touch icons to your drupal 7 theme.

An Apple touch icon is the image being used when someone bookmarks a page or adds it to their homescreen. The most prominent exposure I get to touch icons is when I'm opening a new window or tab on my iphone, then I'm usually presented with a neat looking collection of icons from the web sites I frequent often. If however a site does not have an apple touch icon what you get is a blank square instead of a nicely designed icon.

How do you add an Apple touch icon to your Drupal 7 theme? I found this very usefull code on StackExchange http://drupal.stackexchange.com/questions/34845/how-to-implement-apple-touch-icon-to-a-site

I added an extra slash before the path to theme, which I believe the original author Елин Й forgot.

Of course this code assumes you have generated the appropriate icons files and placed theme in your 'mytheme' folder. Enjoy:

In template.php

function mytheme_preprocess_html(&$variables) {
  /**
   * Add default icon
   */
  $apple_icon =  array(

    '#tag' => 'link',
    '#attributes' => array(
      'href' => '/'.path_to_theme() .'/apple-touch-icon.png',
      'rel' => 'apple-touch-icon-precomposed',
    ),
  );

  /**
   * Loop through to add various sizes
   */
  $apple_icon_sizes = array(57,72,114,144);

  foreach($apple_icon_sizes as $size){
    $apple = array(
      '#tag' => 'link',
      '#attributes' => array(
        'href' => '/'.path_to_theme().'/apple-touch-icon-'.$size.'x'.$size.'.png',
        'rel' => 'apple-touch-icon-precomposed',
        'sizes' => $size . 'x' . $size,
      ),
    );
    drupal_add_html_head($apple, 'apple-touch-icon-'.$size);
  }
}
Categories