2

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?

8

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>
4

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.