How to Dynamically Create Mobile Touch Shortcut Icon for Apple iOS and Android

Goal:

Say your website has 2 users, each has a different avatar icon.  You want the user to be able to create a mobile touch / shortcut / favorite icon on their Apple iOS / Android device / Desktop.  It isn’t really a bookmark icon.

Solution:

You need to create the icon of the right sizes and add the following to the head section of the HTML:

<head>
...
<meta name="mobile-web-app-capable" content="yes">
...
<link href="http://www.xxxx.com/Images/B5-76x76.png" rel="apple-touch-icon" sizes="76x76" />
<link href="http://www.xxxx.com/Images/B5-120x120.png" rel="apple-touch-icon" sizes="120x120" />
<link href="http://www.xxxx.com/Images/B5-152x152.png" rel="apple-touch-icon" sizes="152x152" />
<link href="http://www.xxxx.com/Images/B5-128x128.png" rel="shortcut icon" sizes="128x128" />
<link href="http://www.xxxx.com/Images/B5-196x196.png" rel="shortcut icon" sizes="196x196" />
...
</head>

Note that you have the flexibility of specifying both the url and image filename.

Here is a sample code for ASP.NET to generate the above <link> HTML:

protected void Page_Init(object sender, EventArgs e)
{
#region shortcut icons for iOS
AddTouchIcon(76, "apple-touch-icon");
AddTouchIcon(120, "apple-touch-icon");
AddTouchIcon(152, "apple-touch-icon");
#endregion

#region shortcut icons for Android
AddTouchIcon(128, "shortcut icon");
AddTouchIcon(196, "shortcut icon");
#endregion
}

private void AddTouchIcon(int size, string rel)
{
HtmlLink myHtmlLink = new HtmlLink();

myHtmlLink.Href = string.Format("~/Images/B{0}-{1}x{1}.png", CurrentUser.BranchID, size);
myHtmlLink.Attributes.Add("rel", rel);

switch (size)
{
case 76:
case 120:
case 128:
case 152:
case 196:
myHtmlLink.Attributes.Add("sizes", string.Format("{0}x{0}", size));
break;
default:
break;
}

Page.Header.Controls.Add(myHtmlLink);
}

Don’t forget the <meta> tag for Android Chrome.

Of course you need to create and store those different images as well.

Testing

Note that creating the shortcut is both OS and browser dependent.  On iOS (iPad and iPhone), I had to use Safari.  I could not get Chrome to do it. 

On Android (Samsung Note 3), we had to use Chrome to create the shortcut to the home page.

On PC desktop, I used Chrome to create a shortcut.  Note that it is NOT the same as bookmark.

 

Reference:

https://developers.google.com/chrome/mobile/docs/installtohomescreen

http://socialmedia.biz/2012/02/21/encourage-visitors-to-save-your-site-as-a-mobile-shortcut/

http://www.kylejlarson.com/blog/2013/adding-an-icon-for-iphone-ipad-android-to-your-website/

https://support.google.com/chrome/answer/95710?hl=en

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s