Hi Lee,

Sorry but I am not sure I got your point, could you please make it clear. I am using Window so it's great if you can provide a screenshot highlighting the problem.

Regards.

Hi Gardner,
When viewing a website on an Apple device (iPhone or iPad) you can choose to add a shortcut to the website to your homescreen. This way you can just click the icon and the website will load. See the attached screenshot of an apple device.

When you choose to do this you can usually create a specific icon file that will be used, instead of a smaller resized capture of the website homepage. What I would liek to do is create an icon of my clients logo and use this as the homescreen icon.

On other Joomla sites I have built it usually goes in the templates folder named apple-touch-icon.png.

I was wondering if this is correct with the T3 framework.

Lee

OK here are the steps:

1. Create your icon in these pixel sizes:

57 x 57
72 x 72
114 x 114
152 x 152

Save the images as png files and upload to your server either the images or template/images folder.

2. Duplicate your tpls/blocks/head.php file and rename it.

3. Modify your tpls/default.php (or whatever file you are using as your default layout) file to load the new renamed head file.

4. Open the renamed head file and add:

<link rel="apple-touch-icon" href="ABSOLUTE PATH TO IMAGE_icon-57x57.png">
<link rel="apple-touch-icon-precomposed" href="ABSOLUTE PATH TO IMAGE_icon-57x57.min.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ABSOLUTE PATH TO IMAGE_icon-72x72.min.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="ABSOLUTE PATH TO IMAGE_icon-114x114.min.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="ABSOLUTE PATH TO IMAGE_icon-152x152.min.png">

Replace the ABSOLUTE PATH TO IMAGE with your URL to the folder where the images are stored. It must be the complete url starting with http:// eg:

<link rel="apple-touch-icon" href="http://www.t3-framework.org/images/bookmarks/t3framework_icon-57x57.png">


5. Refresh your site on your mobile device and add a bookmark / add to homescreen.

Your logo should now appear on your mobile device.

RI hope that helps someone!

Lee

Thanks Lee for the great tutorials.

Regards

Hi,

Thanks Lee for the instructions.

I had some trouble getting this to work for me, and finally the issue was the absolute paths. Once I removed the full http://, and just used "/sitename/images/image_name.png" Then it worked for me.

If anyone is having issues with getting T3 to recognize the icons, check your source. My paths were rendered with double "http://" causing them to not load.