With gloss
<link rel="apple-touch-icon" href="Replace this with your link to the image URL want to use" />
without gloss
<link rel="apple-touch-icon-precomposed" href="Replace this with your link to the image URL want to use" />
This goes in under the <head> HTML code you can choose with one you want either the gloss effect or no gloss at all!
<head>
<link rel="apple-touch-icon" href="Replace this with your link to the image URL you want to use" />
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
Also for the new retina display you can have the image at least 125 x 125 pixels so it will look in pure high quality instead of being blocky if the icon was small like 57 x 57 pixels
Update: This doesn't currently work on the mobile templates - I tried everything to get it to display but there is no way you can add the to the mobile template
<head>
<link rel="apple-touch-icon" href="Replace this with your link to the image URL you want to use" />
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
Also for the new retina display you can have the image at least 125 x 125 pixels so it will look in pure high quality instead of being blocky if the icon was small like 57 x 57 pixels
Update: This doesn't currently work on the mobile templates - I tried everything to get it to display but there is no way you can add the to the mobile template
