Using Meta and Link Tags for OS Integration

Key Meta and links can help Integrate your application or website into any OS. Which gives a professional prospective to your product. It makes it easier for the client to access your application/site as would access any native app.

Below are some tags I use to create “Add to Homescreen” icons. These meta and links are easy to implement but high impact on a product.

Windows 8

<meta name="application-name" content="iWebDraft"/>
<meta name="msapplication-tooltip" content="Salman Munawar / Web Design / Development" />
<meta name="msapplication-TileColor" content="#0f5cbf"/>
<meta name="msapplication-wide310x150logo" content="img/win-logo.jpg"/>
<meta name="msapplication-square150x150logo" content="img/ie150x150.jpg">
<meta name="msapplication-square70x70logo" content="img/ie70x70.jpg">

For more comprehensive list for windows 8 please visit: Pinned Sites

Andriod

For Android little more work is required. In addition to link tags you have to create a manifest file listing a supported size and application name.

<link rel="shortcut icon" sizes="196x196" href="img/touch-icon-196x196.jpg">
<link rel="manifest" href="manifest.json">

For more details please visit: Add to Homescreen

IOS

<link rel="apple-touch-startup-image" href="img/splash.jpg" sizes="640x1096">
<link href="img/ico/apple-touch-icon-57-precomposed.png" sizes="57x57" rel="apple-touch-icon">
<link href="img/ico/apple-touch-icon-114-precomposed.png" sizes="114x114" rel="apple-touch-icon">
<link href="img/ico/apple-touch-icon-72-precomposed.png" sizes="72x72" rel="apple-touch-icon">
<link href="img/ico/apple-touch-icon-144-precomposed.png" sizes="144x144" rel="apple-touch-icon">

For more details please visit: Add to Homescreen

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