Web Page Icons for your Apple Device Users

iconHeadB

Let’s say an iPad, iPhone or iPod touch user visits your website, and they’re totally impressed with what you have to offer — so much so that they want to make a note of it for future reference…

One option that they have is to add your page to their Home Screen, which allows them to display an icon on their device that links to your website. Whenever they wish to revisit your page, all they have to do is tap the icon and they’re back! Very convenient.

Now, unless you’ve specified an icon graphic in the <head> section of your document, the apple device will generate a it’s own default icon which is basically just a tiny screen-shot of the page itself — not very impressive. Obviously, it would be best to have a webpage icon that uniquely represents your site (your logo, perhaps) and presents your brand in the most visually appealing manner possible.

 

Web Page Icons: Apple-touch-Icon Not SpecifiedWeb Page Icons: Our Original GraphicWeb Page Icons: Our Graphic with iOS-added Effects

 

If you’d like to take advantage of this great feature, here’s a quick look at how to create and set-up Apple device Web Page Icons for your website.

First of all, you’ll need to create the graphics — multiple versions to accommodate the different size requirements of iPad, iPhone and iPod:

  • 57 x 57 pixels for iPhone and iPod touch
  • 114 x 114 pixels for iPhone and iPod touch (high-resolution)
  • 72 x 72 pixels for the iPad
  • 144 x 144 pixels for the iPad (high-resolution)

These should all be saved as .png files. Hint: keep your icon design as straightforward and simple as possible — a basic white logo or image on a flat colored background works just fine. Too much detail doesn’t always translate well visually.

Next, upload your newly-created icon graphics to your Web server. You’ll probably want to make a note of the directory you upload to, as you’ll need to specify the path in the next step.

Finally, add the following lines to the <head> section of your page:

<link rel="apple-touch-icon" href="path/myIcon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="path/myIcon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="path/myIcon-114x114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="path/myIcon-144x144.png" />

And that’s basically it — when the user adds your website to their home screen, their device will go through the above list and select the graphic that’s the appropriate size. As well, iOS will automatically add some spiffy visual effects such as drop shadow, rounded corners and a nice reflective shine to your icon.

One final note, I recently discovered that the Chrome browser for my Android Smart Phone also supports apple-touch-icon graphics when you bookmark a webpage — it doesn’t appear to add the aforementioned iOS visual effects, but still, pretty impressive!

More detailed information about this topic can be found at the Apple Developer Site.