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.
Recommended Reading: Generate Android Or IOS App Icons With MakeAppIcon
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.
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.
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.
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
- Favicon browser support – Information Gift
- Making iOS icon with App Icon Template – Pixel Resorts
- Specifying a Webpage Icon for Web Clip – Safari Developer Library
- Understand the Favicon
     |