How to implement apple-touch-icon to a site

Question

I'm trying to place an apple-touch-icon on a site. I have attempted to implement this via the following code block placed in example_preprocess_node()..

function example_preprocess_node(&$variables) {

  ...

  $apple_touch = array(
    'rel' => 'apple-touch-icon',
    'href' => path_to_theme() . '/apple-touch-icon.png',
    'sizes' => '114x114'
  );

  drupal_add_html_head_link($apple_touch);

  ...

}

I cleared the caches and reloaded the page, but I'm not seeing the <link.../> line in my header at all.

Is this this right place to implement the apple-touch-icon?

Answer 1

I enhanced @willtate code a little. Note: If you need to create the icons quickly use this online generator: http://iconifier.net/

Add the default icon

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

drupal_add_html_head($apple_icon, 'apple-touch-icon');

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);
}

HTML Output

<link sizes="57x57" rel="apple-touch-icon-precomposed" href="sites/all/themes/yourtheme/apple-touch-icon-57x57.png"></link>
<link sizes="72x72" rel="apple-touch-icon-precomposed" href="sites/all/themes/yourtheme/apple-touch-icon-72x72.png"></link>
<link sizes="114x114" rel="apple-touch-icon-precomposed" href="sites/all/themes/yourtheme/apple-touch-icon-114x114.png"></link>
<link sizes="144x144" rel="apple-touch-icon-precomposed" href="sites/all/themes/yourtheme/apple-touch-icon-144x144.png"></link>
<link rel="apple-touch-icon-precomposed" href="sites/all/themes/yourtheme/apple-touch-icon.png"></link>

Answer 2

After some tinkering I've finally got it working:

function example_preprocess_html(&$variables) {

  ...

  //regular apple-touch-icon
  $apple = array(
    '#tag' => 'link', // The #tag is the html tag - <link />
    '#attributes' => array( // Set up an array of attributes inside the tag
      'rel' => 'apple-touch-icon',
      'href' => path_to_theme() .'/apple-touch-icon.png',
    ),
  );
  drupal_add_html_head($apple, 'apple-touch');

  // 72x72 apple-touch-icon
  $apple = array(
    '#tag' => 'link',
    '#attributes' => array(
      'rel' => 'apple-touch-icon',
      'href' => path_to_theme() . '/apple-touch-icon-72x72.png',
      'sizes' => '72x72',
    ),
  );
  drupal_add_html_head($apple, 'apple-touch-72');

  // 114x114 apple-touch-icon
  $apple = array(
    '#tag' => 'link',
    '#attributes' => array(
      'rel' => 'apple-touch-icon',
      'href' => path_to_theme() . '/apple-touch-icon-114x114.png',
      'sizes' => '114x114',
    ),
  );
  drupal_add_html_head($apple, 'apple-touch-114');

  ...

}

Note: I was forced to use drupal_add_html_head() here as drupal_add_html_head_link() only allows for distinct rel values.