MirthLab

According to the Apple docs, you need to create a 57x57 PNG, name it “apple-touch-icon.png” and upload it to the root of your web directory in order for the iPhone to find and use your icon.

What I found more useful though, was that this can be overridden using a link attribute, similar to the way favicons are handled. This allows us to use symfony’s standard “images” directory to house the icon. So, the head of our layout.php could be updated with the addition of:

<link rel="apple-touch-icon" href="<?php echo image_path('apple-touch-icon') ?>" />

… which would make it look something like this:

Note: as this is a post on symfony, I’m using symfony’s built-in image_path helper, but this can be simply href="/images/apple-touch-icon.png" if you’re not into that.

Taking it a Step Further

The way the real power of symfony gets leveraged is when you want to have different icons for different sections of your site. Let’s say you wanted to have a different touch icon related to every different module in your symfony project. Symfony makes this really simple to do. Replace the existing link tag we made earlier with something like this:

<?php if (file_exists(sfConfig::get('sf_web_dir').'/images/webclip_icons/'.$sf_context->getModuleName().'.png')): ?>
    <link rel="apple-touch-icon" href="<?php echo image_path('webclip_icons/'.$sf_context->getModuleName()) ?>" />
<?php else: ?>
    <link rel="apple-touch-icon" href="<?php echo image_path('webclip_icons/apple-touch-icon') ?>" />
<?php endif ?>

Basically, this code just checks to see if there’s a Web Clip icon with the same name as the current module in /images/webclip_icons and if it finds it, it links to that one instead of the default one.

Of course, this is just an example of how powerful and easy this is. This idea could be extended in many different ways.

More Info

You can read more about iPhone development at Apple’s iPhone Dev Center. One of the more useful pages on that site is the one on Designing Content.

Also, as noted elsewhere, you seem to get a crisper icon if you use a 60x60 image at 72 DPI.