Custom WebClip icons
by leon on February 28, 2008
Just finished putting the final touches to the iPhone/iPod Touch version of the SizzlaBlog. As I previously mentioned I have installed a plug-in by ContentRobot which will automatically reformat my content when the site is viewed on the iPhone.
I have just re-themed the default colours to my orange pallet and also added a custom WebClip icon.
The user can add a web application or webpage link to the Home screen. These links, represented by an icon, are called web clips.
To create your own WebClip for your site, follow these simple instructions:
Create a 57px X 57px image. Make sure that it doesn’t have rounded edge’s or a gloss effect. The iPhone adds these in automatically. It will also add a drop show for you:
Above is how your image should look. Below is the iPhone generated web clip.
Upload your image to a location on your server and give it a name. Next add the following line of code to the <head> section of the pages you want the icon to appear in. I added this to the header.php file.
<link rel="apple-touch-icon" href="/custom_icon.png"/>
Thats it!! Preview your page on the iPhone, click the + at the bottom of the screen and click ‘Add to Home Screen’. You will now have a rather nice Sizzla icon which you can click on to go straight to the blog.
Leave your comment