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. 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.

Make an iOS Bookmark Icon

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

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 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:

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.

.

Related articles:

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

8 Comments

» Comments RSS Feed

  1. […] 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 […]

  2. […] 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 […]

  3. Mike says:

    Thanks for this, worked like a charm.

  4. 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?

  5. 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!

  6. Alex says:

    Looks better without the bubble IMO

Leave a Reply

 

Shop on Amazon.com and help support OSXDaily!

Subscribe to OSXDaily

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

Tips & Tricks

News

iPhone / iPad

Mac

Troubleshooting

Shop on Amazon to help support this site