Brendan Murty

High resolution web app icons

25 Jun 2013

Web apps like UpcomingTasks are put to better use when they are added to home screens on devices. This allows the user to access them quickly and your web app earns it's place amongst the users' other apps.

There are a few things to remember when implementing this feature in your web app.

iOS and Android

To ensure that iOS doesn't apply the default shine to your icon, you'll need to use the correct tag in the head section of your page:

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

Android browsers also support this method, sweet!

Windows 8

For Windows 8/RT devices, you'll just need to include the following in the head section of your page:

<meta name="application-name" content="YourWebApp"/>
<meta name="msapplication-TileColor" content="#325ba0"/>
<meta name="msapplication-TileImage" content="/images/logo-144-clear.png"/>
<meta name="msapplication-starturl" content="/webapphome.php" />

Windows Phone

Unfortunately, Windows Phone requires a little more setup. You'll have to form up a unique page for Windows Phone users, a sample pin to start page is:

<!doctype html>
<html>
	<head>
		<title>YourWebApp</title>
		<meta charset="utf-8">
		<meta name="robots" content="noindex,nofollow">
		<meta name="viewport" content="maximum-scale=1,minimum-scale=1,width=device-width">
		<style>
			body{margin:0;position:relative;background-color:#325ba0;color:#fff;height:100%;width:100%;padding:0}
			#icon{font-size:160px;line-height:320px;text-align:center}
			#instructions{margin-top:60px;text-align:center;position:relative;color:#eee}
			#instructions strong{color:#fff}
		</style>
	</head>
	<body>
		<div id="icon">
			<p>
				<img src="/images/logo-160.png" alt="YourWebApp" />
			</p>
		</div>
		<div id="instructions">
			<p>
				Tap <strong>...</strong> and select <strong>pin to start</strong>
			</p>
		</div>
		<script>
			var url = 'https://yourwebapp.com/webapphome.php';
			if(localStorage.getItem(url)) {
				window.location.replace(url);
			}else{
				localStorage.setItem(url, true);
			}
		</script>
	</body>
</html>

This will produce a screen similar to the image below:

Add to home page

And after following the directions on the page, it's now on the user's home screen:

Home screen

Looks great!

I'd also recommend a guide to assist your users in adding the page to their home screen, as I've done for UpcomingTasks on the Add to Home page.

Notes

Sources and inspiration