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.