How to use custom IOS icons for Joomla
(this also works for most Android tablets running Honeycomb or ICS as well)

- Overview -
By default in YooTheme templates you can find the default Joomla bookmark icon for ios here....

http://www.domain.com/templates/name_of_template/apple_touch_icon.png

This icon will serve the purposes for adding an "app" icon to your devices homescreen on iphones and ipads.

Using the default icon format as provided by YooTheme will let the ios device add the rounded corners and the shiny effects automatically.
(Android only adds rounded corners)

basically you just add your logo as best you can to that black square and re-upload the png. The device will do the rest!

However... many users want to create a custom icon for their website when adding the bookmark to their device's homescreen.
and many users dont want to use Apple's shine effects.

This short tutorial will allow you to use any custom icon for those devices WITHOUT shine effects.

This is known in ios code as: apple_touch_icon and apple_touch_icon_precomposed
precomposed tag lets the device know not to add the effects.

First you'll need to create 2 different icons:
1. 72x72 for ipads
2. 114x114 for iphone4's
The iphone 4 has the retina display and requires a high res icon. (as of this writing the ipad1 and ipad2 do not)

You can find a nice selection of icons and some other tutorials on how to create more ios icons here:

http://blog.cocoia.com/2010/iphone-4-icon-psd-file/

A great master psd file for icon sizes can be had here for free!
http://medialoot.com/item/iphone-app-icon-kit/

and for you Illustrator CS5 users:
http://hicksdesign.co.uk/journal/ios-icon-template-for-illustrator-cs5

We created our actual icons from scratch for both sizes..we did not just resize the 114x144 down to 72x72 due to there being some blurryness.

now once you are happy with your icons. save them as:

apple_touch_icon_72.png
apple_touch_icon_114.png

and upload them to your templates root folder.

For example...our folder was found at:
/www/templates/yoo_downtown

Now in your template find this file:

Joomla 1.5
/www/templates/yoo_downtown/warp/systems/joomla.1.5/layouts/head.php

Joomla 1.7
/www/templates/yoo_downtown/warp/systems/joomla.1.5/layouts/head.php

---

FOR JOOMLA 1.5 ONLY

---

around line 121 or at the end of the document you'll see this:

---

<link rel="apple-touch-icon" href="<?php echo $this['path']->url('template:apple_touch_icon.png'); ?>" />

change it to this:
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php echo $this['path']->url('template:apple_touch_icon_72.png'); ?>" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php echo $this['path']->url('template:apple_touch_icon_114.png'); ?>" />

---------------------

FOR JOOMLA 1.7 ONLY

around line 3 find:

<link rel="apple-touch-icon" href="<?php echo $this['path']->url('template:apple_touch_icon.png'); ?>" />

change to:
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php echo $this['path']->url('template:apple_touch_icon_72.png'); ?>" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php echo $this['path']->url('template:apple_touch_icon_114.png'); ?>" />

---

additionally in the templates xml file

replace:
<filename>apple_touch_icon.png</filename>

with:
<filename>apple_touch_icon_72.png</filename>
<filename>apple_touch_icon_114.png</filename>

On your devices, delete any existing homescreen icons and open Safari or the Stock Andorid browser and revisit the website and readd them to the homescreen.