Add iPhone app icon to your mobile site


Author Message
Simon Reynolds

Posted: 9/24/2012
Quote message 

Now Artisteer V4 allows export of Responsive mobile compatible templates I felt there was still something missing.</p>
Obviously they will eventually add this as an option like selecting your favourite icon .ico but for those who like me want everything yesterday, this may help.</p>
I have just added an iPhone app icon to my site. If a visitor wants to add a site to their Homescreen, they end up with a screenshot of your site.
If you follow this, you can add a nice icon to their screen:</p>

Make sure that your home page has the name of your site or whatever you want your visitors to see: Go to Menu Manager: Edit Menu Item. Go to Page Display Options and add the page title you want people to use.</p>

Download the Photoshop Action and template from here:</p>

http://appicontemplate.com/appicontemplate_v2.zip</p>
I am still playing with this so if anyone can write some instructions that make sense I would be grateful!</p>

Once you have created your icon, upload it to your site. I put mine in the Images folder.</p>

Open your template index.php file in your favourite code editor and find the line (around line 73) that reads:</p>
<link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.responsive.css" media="all">
</p>
Under this line add:</p>
 <link rel="apple-touch-icon" href="http://yoursitename.com/images/apple-touch-icon.png" />
</p>
Save your file and your'e done!</p>

Have fun
 
Aiad

Posted: 10/25/2012
Quote message 

Hi, it is not working. do you have more information to get to work
 
Annette

Posted: 2/6/2015
Quote message 

in Wordpress header adding this works if the images are uploaded to the root folder :-)

<link rel="apple-touch-icon" href="<?php bloginfo(''); ?>/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="57x57" href="<?php bloginfo(''); ?>/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="<?php bloginfo(''); ?>/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="<?php bloginfo(''); ?>/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="<?php bloginfo(''); ?>/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="<?php bloginfo(''); ?>/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="<?php bloginfo(''); ?>/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="<?php bloginfo(''); ?>/apple-touch-icon-152x152.png" />