This is a small tutorial that I actually done a few months ago before I revamped and changed my blog over to WordPress from Joomla, but as I was getting a lot of hits on my site for it, I thought it best to do the tutorial again.
At the moment if you bookmark a website on your iPhone/iPod touch the little icon will actually be a shrunk down screen shot of the website, but with tutorial I will show how to create your own icon and how to code it into your Joomla template.
Create the Icon
There isn’t really much to this, you just need to create a simple PNG image that is 57×57 pixels. You don’t have to add any shine, rounded corners or transparency to this, as the OS on the iPhone/iPod touch does this for you automatically.
UPDATE : I realised that the resolutions for the new iPhone 4 and iPad weren’t taken into consideration. Detailed below is a list of the resolutions for that, it would be best to create your icon at 114×114 pixels and let the iPhone/iPad OS downscale your image.
iPhone 4 – 114 x 114 pixels
Older iPhones iPod Touches – 57 x 57 pixels
iPad – 72 x 72 pixels
Insert the Code
Simple copy and paste the line of code below relevant to the icon you want in between your HEAD tags.
You can name the image whatever you wish and you just need to edit the code accordingly for this to work.
Glossy Icon Effect
<link rel=”apple-touch-icon” href=”templates/<?php echo $this->template ?>/images/alanhornedotcom_mobile_icon.png” />
Non-Glossy Effect
<link rel=”apple-touch-icon-precomposed” href=”templates/<?php echo $this->template ?>/images/alanhornedotcom_mobile_icon.png” />
Alternatively
If you want to you can place the icon directly into your root folder and for this to work you need to call the icon apple-touch-icon.png or apple-touch-icon-precomposed.png everything else is done by the iPhone/iPod touch OS.
UPDATE – Thanks to BenjaminReid at Nouveller for the information on the new iPhone 4 resolutions.
Join the conversation - 12 Comments
Now the iPhone 4 is out in the wild (as well as the iPad) it’d be a good idea to make your PNG’s 114px by 114px. This larger size will look great on the iPhone 4′s retina display and just be scaled down for the iPad and iPhone 3 and below.
Your right Benjamin, I didn’t read up oon the new resolutions for the iPhone 4. Will update the blog post with a little link for you too.
I’m no expert, so please bare with me. I should be adding that code to between the HEAD tags in the HTML? If so, it looks like this:
<link rel=”apple-touch-icon” href=”templates/template ?>/images/alanhornedotcom_mobile_icon.jpg” />
So that seem right? Also, where does the image file need to be located for this work?
Thanks!
Hi Chuck,
Yeah you basically copy and paste that code in between the
tags. The last peice of the code, which is the name of the image, you need to change that to suit your image, you can name it whatever you wish.Your image needs to be a PNG file and you save it in your images folder in the Joomla template your using. Drop me a little email or ask on here if your still having problems getting it working.
Question: I’m having some difficulty. We built our website using CMS called Joomla!
I tried placing the .png file which was called apple-touch-icon.png into the root folder and there was no bookmark / icon for me.
Do I need to reboot the iPhone before I can see it?
I was unable to see any HTML when I opened the “index.html” file inside the root folder, so maybe Joomla!’s PHP files won’t let me see HTML?
I’m no expert BTW …
Any clue or suggestions?
Thanks.
Hi Shai,
Sorry for the late reply. It is possible that you have put the icon in the root folder of your hosting, rather than the template your using.
If your using FTP, go into the TEMPLATES folder then the name of the template your using, and there you should place the icon.
If you need anymore help give me a shout.
I added the image to the root folder of my Joomla site and it is still trying to use the Joomla logo instead of my icon.
Type the code into your header and don’t paste it from this page to avoid font character errors. Check the source code in your browser to see if any errors exist. FYI
Thanks for the code Alan
I inserted and updated the code above and see it in my html, but how can I see if it works without an iphone? Should the logo show up, or it only does on the iphones?
Hi Ron, unfortunately it only works for iPhones/iPods/iPads.
I am using Jomsocial and would like to change the icon based on the userprofile being bookmarked. Do you have any insight as to the code I would need to put in the header?
Hi Sam, being honest, its probably over and above my skillset, you would be best maybe getting in touch Joomla PHP developer, I’m sure someone like Brian Teeman could point you in the right direction.