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

Mar 29, 2012 - 8 Comments

Retina Apple Touch Icon

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.

Make an iOS Bookmark Icon

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

Create an Apple Touch Icon

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

Retina Apple Touch Icon for OSXDaily

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.

Add website bookmark to homescreen

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.

Enjoy this tip? Subscribe to the OSXDaily newsletter to get more of our great Apple tips, tricks, and important news delivered to your inbox! Enter your email address below:

Related articles:

Posted by: William Pearson in Development, iPad, iPhone, Tips & Tricks

8 Comments

» Comments RSS Feed

  1. Alex says:

    Looks better without the bubble IMO

  2. I like the bubble effect, since it looks similar to the stock iOS icons.

    Just a question: Is it possible to add the icon to a Tumblr blog? I’ve been trying for a while but no luck so far. If anyones how to do it, it’d be great!

    Thanks!

  3. Ronald says:

    This rocks. But apparently you have only have 1 icon per domain? Example I have 2 application at http://www.abc.com/app1 and http://www.abc.com/app2 so if I save both links to desktop, they cannot have 2 different logos?

  4. Mike says:

    Thanks for this, worked like a charm.

  5. […] some quick googling.. it turns out to be quite easy to do actually.. I learned it from OSX Daily.. but I feel like I can dumb it down a […]

  6. […] quickly create an app just for that website. The default app icon comes from the favicon, or the Apple Touch Icon if the site has one. Give it a try, it’s pretty […]

Leave a Reply

 

Shop for Apple & Mac Deals on Amazon.com

Subscribe to OSXDaily

Subscribe to RSS Subscribe to Twitter Feed Follow on Facebook Subscribe to eMail Updates