Adding iOS Icons for Bookmarked Website

By . in Mobile. Updated on .

The bookmark icon or more commonly known as favicon (favorite icon) has been around since 1999 with the introduction of Internet Explorer 5. The bookmark icon or favicon is generally specified in 16×16 px with .ico (sometimes also with .png format) and is displayed beside the URL address of the web browser or beside the page title of the Tab interface, as shown below.

Today, with mobile device advancement, the bookmark icon or favicon has also evolved. For example, iOS, which you probably are familiar with, displays icons onscreen.

Most of these icons are beautifully designed, and after Apple introduced a new meta tag named apple-touch-icon you can now display website icons on the iOS homescreen when you bookmark a site.

Easily Generate Android Or IOS App Icons With MakeAppIcon

Easily Generate Android Or IOS App Icons With MakeAppIcon

So you have your app icon ready for release. You love both iOS users and Android users the... Read more

Adding Apple Touch Icons

The apple touch icon is specified with <link> tag, as follows.

 <link rel="apple-touch-icon" href="icon.png"/>

This icon, by default, is 57x57px. But, with iPad and Retina devices, we need to provide more sizes. iPad requires icons with the size of 72x72px, while Retina devices need icons with 114x114px size.

So, all in all, we need to provide the icon in the following specifications – within the <head> – to support iPhone, iPad and Retina devices.

 <link rel="apple-touch-icon" href="icon.png"/>
 <link rel="apple-touch-icon" sizes="72x72" href="icon.png"/>
 <link rel="apple-touch-icon" sizes="114x114" href="icon.png"/>

By default, iOS will automatically add the eye-candy effects to the icons.

hkdc icon

If you prefer the icon to not interfere with this effect, you can add -precomposed at the end of the rel name, like so.

 <link rel="apple-touch-icon-precomposed" href="icon.png"/>

Refresh the webpage and re-save to the home screen. Now, the effect is not added to the icon.

hkdc icon precomposed

Recommended Reading: Custom Icon and Image Creation Guidelines – Safari Developer Library

Creating Apple Touch Icons with Photoshop

In our previous post, we have discussed how to create apple touch icon with MacAppIcon. Alternatively – and this is also my preference – we can use PSD templates from AppIconTemplate for more flexibility in customization.

One additional feature that I really like from this PSD template is that it also comes with Photoshop Actions that automatically saves the icon into several sizes, including the ones for iTunes Artwork.

ios icons

Bonus: Adding Windows 8 Pinned Icon

In addition, Windows 8 also provides similar ways to add icons on pinned (bookmarked) websites with the following meta tags.

 <meta name="msapplication-TileImage" content="/metro-tile.png"/>
 <meta name="msapplication-TileColor" content="#015565"/>

For furthrer discussion on implementing these tags at your website, you can head over to the following MSDN post.

Further Resources

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail