Webantix

I have seen on my Xmarks mobile website that I have bookmarked on my home screen on my iPhone does not have the usual screen shot logo. Instead it has a Xmarks logo in place which makes it look more like an app than a website. I thought this is pretty cool and know that my own site has a mobile version so I thought it would be a good addition to my site.

So it just takes the usual favicon right?? Well that’s what I first thought but sadly, no.

After a bit of research I have found two ways to do this.

the first is by entering a link similar to the favicon link.

 <link rel="apple-touch-icon" href="/icon.png" />

the second is just creating the file in the root of your web server directory called apple-touch-icon.png.

I have found that it is best to create PNG32 file 60x60px in size using a transparent background. Do not put any funky shiny bits or corners on the file as your iPad/iPhone will add it all.