[Drupal] How to add bookmark icons to a Drupal 7 website in iPhone

We had a requirement to bookmark each user account of our Drupal 7 website in iPhone. In order to bookmark user accounts, first we have to save the bookmark name and image for each account. The bookmark image is added as a link to the head tag. The image path should be the absolute path to the image.

Add a new meta tag named apple-touch-icon to display website icons on the iOS home screen when you bookmark the site.

Add the following lines to the page to be bookmarked.

$_meta = array(
  '#tag' => 'link',
  '#attributes' => array(
    'name' => 'mobile-icon',
    'href' => full/path/to/bookmark-image,
    'rel' => 'apple-touch-icon',
  ),
);
drupal_add_html_head($_meta,'my_meta');

Using these statements ensures the icon shows up in all browsers.

$_meta_shortcut_icon = array(
  '#tag' => 'link',
  '#attributes' => array(
    'href' => $output['imageurl'],
    'rel' => 'shortcut icon',
    'type'=> 'image/vnd.microsoft.icon'
  ),
);
drupal_add_html_head($_meta_shortcut_icon,'my_meta_shortcut_icon');

To display web content in Safari.

$_meta_apple_web_app_capable = array(
  '#tag' => 'meta',
  '#attributes' => array(
    'name' => 'apple-mobile-web-app-capable',
    'content' => 'yes',      
  ),
);
drupal_add_html_head($_meta_apple_web_app_capable,'my_meta_apple_web_app_capable'); 

To display web content in Chrome.

$_meta_mobile_web_app_capable = array(
  '#tag' => 'meta',
  '#attributes' => array(
    'name' => 'mobile-web-app-capable',
    'content' => 'yes',      
  ),
);
drupal_add_html_head($_meta_mobile_web_app_capable,'my_meta_mobile_web_app_capable');