Add Apple Touch Icon to your Drupal 7 site

 I have been working on a new site based on Drupal 7 and Omega Theme (if you are a developer and don't know about Drupal, you are missing out BIG TIME).  The cool thing about Omega theme is that it's a responsive theme, meaning it allows your site to morph to fit different screen sizes using a new feature known as media queries.  

Since my target devices includes iPhone, iPad, iPod, I wanted to add support for Apple Touch Icon.  What this does is allow iOS users save a short cut with a custom icon to their screen, just like any other native app.  

The code for the icon is very simple: (I found Apple Icon code here)

<link href="http://www.scottsawyerconsulting.net/sites/all/themes/ssc_net/images/logo-icon-ios.png" rel="apple-touch-icon" />

 

Be sure that the path of the href points to your image.  

First things first, create the image.  I found this great tutorial on for making an Apple Icon in Gimp.

Here is my icon:

Now, to add this to Drupal's head with a preprocess function, we need to create the function in template.php of your Drupal theme (remember, these instructions are for Drupal 7).

function THEME-NAME_preprocess_html(&$variables) {  // replace THEME-NAME with your theme

// create a variable for the icon

     $appleIcon = array('#tag' => 'link', '#attributes' => array('href' => 'PATH-TO-IMAGE/icon-ios.png'', 'rel' => 'apple-touch-icon'),);  // replace PATH-TO-IMAGE  with your icon's path

     drupal_add_html_head($appleIcon, 'apple-touch-icon');
}

That's it!  Now build a great Web App with Drupal and let those iOS users know about it.  If you use the code, post a comment below.