How to Make & Set a Retina-Ready iOS Bookmark Icon for a Website

Web developers and website owners pay attention: you need to set a retina-ready iOS bookmark icon. The bookmark icons are called an Apple Touch Icon, and 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 in iOS, or the bookmarks panel of Safari for OS X. Without a custom apple-touch-icon file 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 to create a retina perfect Apple Touch Icon for any website in a few easy steps.

1) Create the Retina-Ready iOS Website 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 Website Bookmark Icon

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 Website Bookmark 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×512 retina-ready bookmark icon from OSXDaily.com:

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.

4) Use an iOS Device and Bookmark the Site

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.

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.

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 Apple touch icon before, but it deserves another mention now that iPad 3 demands significantly higher resolution icons and graphics.