Geek Posted March 29, 2012 Posted March 29, 2012 <div class="KonaBody"><p><img src="http://osxdaily.com/wp-content/uploads/2012/03/retina-apple-touch-icon.jpg" alt="Retina Apple Touch Icon" title="retina-apple-touch-icon" width="620" height="241" class="aligncenter size-full wp-image-28947" /></p> <p>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: <span id="more-28946"></span></p> <h2 style="font-size:1.2em;">1) Create the Retina-Ready iOS Icon</h2> <p>Use a template or design your own. I used the <a href="http://osxdaily.com/2012/03/26/easy-retina-ios-app-icon-kit/">easy DIY retina icon kit mentioned in a previous post</a>, 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, <a href="http://osxdaily.com/2012/03/22/adobe-photoshop-cs6-beta-free-download/">Photoshop CS6 beta is excellent and free to download</a> and use until the final version comes out later in the year. </p> <p><img src="http://osxdaily.com/wp-content/uploads/2012/03/make-ios-bookmark-icon.jpg" alt="Make an iOS Bookmark Icon" title="make-ios-bookmark-icon" width="500" height="306" class="aligncenter size-full wp-image-28952" /></p> <h2 style="font-size:1.2em;">2) Save as PNG & Name the Retina Icon as Desired</h2> <p>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:</p> <ul> <li>“<strong>apple-touch-icon.png</strong>” will add the highlight bubble overlay to the icon</li> <li>“<strong>apple-touch-icon-precomposed.png</strong>” will display the icon as originally created, without the highlight overlay</li> </ul> <p><img src="http://osxdaily.com/wp-content/uploads/2012/03/create-apple-touch-icon.jpg" alt="Create an Apple Touch Icon" title="create-apple-touch-icon" width="477" height="306" class="aligncenter size-full wp-image-28949" /></p> <p>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. </p> <h2 style="font-size:1.2em;">3) Upload the Touch Icon to the Base Web Directory</h2> <p>Use an SFTP client (<a href="http://osxdaily.com/2011/02/07/ftp-from-mac/">OS X includes FTP in the Finder</a>, 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.</p> <p>Here is an example of a 512×512 retina-ready bookmark icon from <a href="http://osxdaily.com">OSXDaily.com</a>:</p> <p><img alt="Retina Apple Touch Icon for OSXDaily" src="http://osxdaily.com/apple-touch-icon.png" title="Retina Apple Touch Icon for OSXDaily" class="aligncenter" width="512" height="512" /></p> <p>Notice that without the -precomposed flag, the above icon will display the highlight bubble. You can see the difference between the two by comparing the actual icon to the one shown in screenshots as the bookmark. </p> <h2 style="font-size:1.2em;">4) Use an iOS Device and Bookmark the Site</h2> <p>This is the easiest part, grab an iOS device (preferably an iPad 3 to confirm the retina aspect) and open Safari. Refresh the web site you uploaded the icon to, and then tap the arrow icon and select “Add to Homescreen” name the bookmark, then return to the Homescreen to confirm it’s there. </p> <p><img src="http://osxdaily.com/wp-content/uploads/2012/03/add-bookmark-to-homescreen.jpg" alt="Add website bookmark to homescreen" title="add-bookmark-to-homescreen" width="450" height="399" class="aligncenter size-full wp-image-28950" /></p> <p>Despite being 512 x 512 pixels, the retina icon will scale down fine on older iPhones and non-retina devices. If you really want to, you can use CSS and HTML to display different sized icons to different devices, but it’s really not necessary. </p> <p>Now if someone bookmarks your web site on an iPad with a retina display, it will look a lot better on their home screen. That’s really all there is to it. And yes, we’ve written about the <a href="http://osxdaily.com/2011/02/09/set-apple-touch-icon-png-to-customize-a-websites-iphone-bookmark-favicon/">Apple touch icon before</a>, but it deserves another mention now that iPad 3 demands significantly higher resolution icons and graphics. </p> </div> <p><a href="http://feedads.g.doubleclick.net/~a/lVlrRudR_YFkY7dUmnzTAUNwOfg/0/da"><img src="http://feedads.g.doubleclick.net/~a/lVlrRudR_YFkY7dUmnzTAUNwOfg/0/di" border="0" ismap="true"></img></a><br/> <a href="http://feedads.g.doubleclick.net/~a/lVlrRudR_YFkY7dUmnzTAUNwOfg/1/da"><img src="http://feedads.g.doubleclick.net/~a/lVlrRudR_YFkY7dUmnzTAUNwOfg/1/di" border="0" ismap="true"></img></a></p><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/osxdaily?a=AkK_KpNiazQ:DmBFEP9WElc:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/osxdaily?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/osxdaily?a=AkK_KpNiazQ:DmBFEP9WElc:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/osxdaily?i=AkK_KpNiazQ:DmBFEP9WElc:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/osxdaily?a=AkK_KpNiazQ:DmBFEP9WElc:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/osxdaily?i=AkK_KpNiazQ:DmBFEP9WElc:D7DqB2pKExk" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/osxdaily?a=AkK_KpNiazQ:DmBFEP9WElc:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/osxdaily?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/osxdaily?a=AkK_KpNiazQ:DmBFEP9WElc:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/osxdaily?d=qj6IDK7rITs" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/osxdaily/~4/AkK_KpNiazQ" height="1" width="1"/> View the full article
Recommended Posts