by 
Web developers and website owners pay attention: you need to set a retina-ready iOS bookmark icon. Called an Apple Touch Icon, these custom images become the icon that is displayed on a users home screen when they bookmark a website on an iPad, iPhone, or iPod touch. Without a custom apple-touch-icon set, users will get a boring and often ugly thumbnail of the web page itself, and without using a retina-ready icon, the bookmarks icon will look pixelated and generally awful on the new iPad screen. Here’s what you need to do:
1) Create the Retina-Ready iOS Icon
Use a template or design your own. I used the easy DIY retina icon kit mentioned in a previous post, it’s a PSD file that makes designing nice looking iOS icons as easy as a click or two. Paste in a website or company logo and you’re pretty much good to go. If you don’t have something to edit PSD files, Photoshop CS6 beta is excellent and free to download and use until the final version comes out later in the year.
2) Save as PNG & Name the Retina Icon as Desired
The icon must be a PNG, and it must be named one of two things. Each file name offers a slightly different appearance of the icon as displayed on a users home screen:
“apple-touch-icon.png” will add the highlight bubble overlay to the icon
“apple-touch-icon-precomposed.png” will display the icon as originally created, without the highlight overlay
Use the latter -precomposed option if you created your own highlight, or if you want the icon to appear more flat without ubiquitous bubble that appears on most of Apple’s default icons.
3) Upload the Touch Icon to the Base Web Directory
Use an SFTP client (OS X includes FTP in the Finder, and CyberDuck or Filezilla are free) to copy the apple-touch-icon.png file to the root web directory. This is usually the same location that the sites main index file is located. Once uploaded, confirm it’s in the proper location by opening a web browser and going to “http://SITEURL.com/apple-touch-icon.png” and making sure it loads.
Here is an example of a 512
