facebook google plus twitter
Webucator's Free Developing Mobile Websites Tutorial

Lesson: Home Screen Icons

Welcome to our free Developing Mobile Websites tutorial. This tutorial is based on Webucator's Responsive Web Design Training course.

iPhones, Android phones, and other devices offer users the ability to add a shortcut/bookmark to a Web page on their home screen; our job as developers is to provide a custom icon that best represents our site or page. Including some code in the head of each page or including a specifically-named icon in the website's root directory provides the functionality on iPhones and iPads; similar strategies work on Androids and other phones.

Lesson Goals

  • Learn how to add custom icons for device home screens.
  • Learn how to specify device-specific features for web pages such as full-screen mode.

Home Screen Icons

iPhone/iPad

  1. Place a PNG icon named apple-touch-icon.png in the website root directory to specify the icon for the entire site if you don't want to add a link tag to pages.
  2. Instead of adding an image to the website root directory, you can instead add a link element to the head section of any page to specify an icon for a single page:
    <link rel="apple-touch-icon" href="/custom_icon.png"/>
  3. To support different device resolutions (iPad vs. iPhone, for instance), add a size attribute to each link element:
    <link rel="apple-touch-icon" href="touch-icon-iphone.png">
    <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
    <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
    The icon that is the most appropriate size for the device is used. If no sizes attribute is set, the element's size defaults to 60 x 60.
  4. If there is no icon that matches the recommended size for the device, the smallest icon larger than the recommended size is used. If there are no icons larger than the recommended size, the largest icon is used.
  5. If no icons are specified using a link element, the website root directory is searched for icons with the apple-touch-icon... prefix. For example, if the appropriate icon size for the device is 60 x 60, the system searches for filenames in the following order:
    1. apple-touch-icon-76x76.png
    2. apple-touch-icon.png

See the Apple Developer site for full details.

A Home Screen Icon for the Jazz Calendar Site: iOS

Open HomeScreenIcons/Demos/ios/index.html from a mobile device. On an iPhone, tap the iPhone bookmark icon icon, tap Add to Home Screen, and tap the upper-right Add button. The result should look like this:

homescreen icon on iPhone

This icon image is used with permission for unlimited commercial use from https://openclipart.org/detail/22245/Musical%20note.

Code Sample:

HomeScreenIcons/Demos/ios/index.html
<!DOCTYPE html>
<html>
<head>
	<title>Jazz Calendar - Local Live Jazz Music Events</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css" />
	<link rel="stylesheet" type="text/css" href="css/ios.css" />
	<link rel="apple-touch-icon" href="images/icons/touch-icon-iphone.png">
	<link rel="apple-touch-icon" sizes="76x76" href="images/icons/touch-icon-ipad.png">
	<link rel="apple-touch-icon" sizes="120x120" href="images/icons/touch-icon-iphone-retina.png">
	<link rel="apple-touch-icon" sizes="152x152" href="images/icons/touch-icon-ipad-retina.png">
	<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</head>

<body>
	<div id="container">
	<div id="main">
		<header>
		<img src="images/logo.gif" alt="Jazz Calendar" />
		<h3 id="tagline">Local jazz info</h3>
		</header>
		<nav>
		<ul>
			<li><a href="index.html">Home</a></li>
		<li><a href="performances.html">Performances</a></li>
		<li><a href="about.html">About</a></li>
		<li><a href="contact.html">Contact</a></li>
		</ul>
		</nav>
		<div id="maincontent">
			<article>
			<h2>Homescreen Icon</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</article>
		</div>
		<aside id="sidebar">
			<h3>Signup</h3>
			<p>Become a member of Jazz Calendar now! <a href="#">Email us</a> to receive frequent notices on upcoming live shows.</p>
		</aside>
		<footer id="contactinfo">
		<p>Jazz Calendar 123 Fake Street, Sometown, USA | 555-123-4567</p>
		</footer>
	</div>
	</div>
</body>
</html>

CodeExplanation

We create a series of icons in various sizes, save those icons in the images/icons directory, and use a series of <link rel="apple-touch-icon" /> tags to specify these as the icons for the home screen.

Apple-Specific Meta Tags

Safari offers several meta tags that allow us to specify how a web page should behave on iOS devices. Check out https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193-SW3 for more details.

  1. <meta name="apple-mobile-web-app-capable" content="yes"> specifies that the page on which this tag resides should run in full-screen mode.
  2. <meta name="apple-mobile-web-app-status-bar-style" content="black">, which only works if the apple-mobile-web-app-capable meta tag is included first, allows us to change the display of the status bar. If content is set to default, the status bar appears normal. If set to black, the status bar has a black background. If set to black-translucent, the status bar is black and translucent. If set to default or black, the web content is displayed below the status bar. If set to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar. The default value is default.

Android-Specific JSON Manifest

Since Chrome version M31, the mobile browser running on Android devices, Google has offered a way to set up a web app to have an application shortcut icon for adding to the device's home screen; when clicked, the home screen icon will launch the web application in full-screen "app mode". Since Chrome version M39, Google offers a way - via a JSON manifest - to specify metadata for the application, allowing us as developers a way to more closely mimic a native-application experience with our web app. You can find more details at https://developer.chrome.com/multidevice/android/installtohomescreen.

Home screen-installed web apps work just like a "normal" web app but integrate into the Android environment in the following extra ways:

  1. Installs Directly to Home Screen: users clicking "Add to homescreen" will see the app being added on to the home screen.
  2. Integrates Into OS Task-Switcher: launching a web app from the home screen means the app will appear in the task switcher, separately from the browser.
  3. Runs in Full Screen: Web apps run in full screen more, with no vestiges of a browser; the URL does not appear, nor browser elements like bookmarking and navigation controls.
  4. Supports a Default Device Orientation: Web apps launch and remain in the designation orientation (landscape or portrait).
  5. Navigating to External Pages Highlights Them to User: Users will always know if the web app routes them to a location outside the application's domain - especially useful for authentication flows, as the user is kept in the app experience but the URL of the authentication system is clearly visible to the user.

The JavaScript manifest, in JSON format, allows us to define things like a set of icons (various icons, for differing size and screen densities), a default orientation, a title, and landing page for our web app. To link to the manifest, simply include a link tag in the head of the web page, like this:

<link rel="manifest" href="manifest.json">

A typical manifest file might look like this:

{
	"name": "Sample Webucator Android Web App",
	"icons": [
		{
			"src": "launcher-icon-0-75x.png",
			"sizes": "36x36",
			"type": "image/png",
			"density": "0.75"
		},
		{
			"src": "launcher-icon-1x.png",
			"sizes": "48x48",
			"type": "image/png",
			"density": "1.0"
		},
		{
			"src": "launcher-icon-1-5x.png",
			"sizes": "72x72",
			"type": "image/png",
			"density": "1.5"
		},
		{
			"src": "launcher-icon-2x.png",
			"sizes": "96x96",
			"type": "image/png",
			"density": "2.0"
		},
		{
			"src": "launcher-icon-3x.png",
			"sizes": "144x144",
			"type": "image/png",
			"density": "3.0"
		},
		{
			"src": "launcher-icon-4x.png",
			"sizes": "192x192",
			"type": "image/png",
			"density": "4.0"
		}
	],
	"start_url": "index.html",
	"display": "standalone",
	"orientation": "portrait"
}

Our sample manifest includes references to various PNG icons - in assorted sizes and pertaining to specific screen densities - as well as a starting URL, display mode ("standalone"), and orientation ("portrait").

For mobile versions of Chrome on Android older than M39 but since M31, Chrome supports the following meta tag for home screen-installed apps:

<meta name="mobile-web-app-capable" content="yes">

A Home Screen Icon for the Jazz Calendar Site: Android

Open HomeScreenIcons/Demos/android/index.html and HomeScreenIcons/Demos/android/manifest.json in a file editor and, if possible, open HomeScreenIcons/Demos/android/index.html from an Android device or emulator.

Code Sample:

HomeScreenIcons/Demos/android/manifest.json
{
	"name": "Webucator Web App",
	"icons": [
		{
			"src": "images/icons/launcher-icon-0-75x.png",
			"sizes": "36x36",
			"type": "image/png",
			"density": "0.75"
		},
		{
			"src": "images/icons/launcher-icon-1x.png",
			"sizes": "48x48",
			"type": "image/png",
			"density": "1.0"
		},
		{
			"src": "images/icons/launcher-icon-1-5x.png",
			"sizes": "72x72",
			"type": "image/png",
			"density": "1.5"
		},
		{
			"src": "images/icons/launcher-icon-2x.png",
			"sizes": "96x96",
			"type": "image/png",
			"density": "2.0"
		},
		{
			"src": "images/icons/launcher-icon-3x.png",
			"sizes": "144x144",
			"type": "image/png",
			"density": "3.0"
		},
		{
			"src": "images/icons/launcher-icon-4x.png",
			"sizes": "192x192",
			"type": "image/png",
			"density": "4.0"
		}
	],
	"start_url": "index.html",
	"display": "standalone",
	"orientation": "portrait"}

Code Explanation

Our index.html files has a link tag in the head section, pointing to the manifest.json file.

When opened in Chrome on an Android device (in our case, in the screenshots below, on an Android tablet device), the page allows users to tap "Add to homescreen" and, because we have coded our page with the manifest.json file and added the appropriate icons, we get a tappable home screen icon. When opened via the homepage "music note" icon, the page opens as a web app, in full-screen mode with our specified orientation. The screenshot below shows the home screen (with icon) on the left and the full-screen page on the right:Home Screen and Full Screen Page

We reference the various sizes of our icon in the manifest file and specify a title, starting URL, display, and orientation.

In the next exercise, you'll add home screen icons to the Pickup Soccer site, for both iOS and Android devices.

Adding Home Screen Icons to the Pickup Soccer Site

Duration: 15 to 25 minutes.

In this exercise, you will add a set of custom icons for a page on the Pickup Soccer site, for both Android and iOS devices.

  1. Open HomeScreenIcons/Exercises/index.html in your file editor.
  2. Add code in the head of the page to use the images provided in images/icons/ as the home screen icon for the page, for both Android and iOS devices. You\'ll need to create a manifest.json file for Android devices.
  3. Be sure to check your work on a smartphone or emulator.

The icon image we use here is used with permission for unlimited commercial use from https://openclipart.org/detail/5372/Soccer%20Ball.

Solution:

HomeScreenIcons/Solutions/index.html
<!DOCTYPE html>
<html>
<head>
	<title>Soccer Pickup</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css" />
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<meta name="viewport" content="initial-scale=1.0, width=device-width" />
	<link rel="apple-touch-icon" href="images/iconsios/touch-icon-iphone.png">
	<link rel="apple-touch-icon" sizes="76x76" href="images/iconsios/touch-icon-ipad.png">
	<link rel="apple-touch-icon" sizes="120x120" href="images/iconsios/touch-icon-iphone-retina.png">
	<link rel="apple-touch-icon" sizes="152x152" href="images/iconsios/touch-icon-ipad-retina.png">
	<link rel="manifest" href="manifest.json">
</head>

<body>
	<div id="container">
		<header>
			<a href="index.html"><img src="images/logo.png" alt="Soccer Pickup" id="logo" /></a>
			<nav id="mainnav">
				<ul>
					<li><a href="index.html">Home</a></li>
					<li><a href="find-a-game.html">Find a Game</a></li>
					<li><a href="about.html">About</a></li>
					<li><a href="contact.html">Contact</a></li>
				</ul>
			</nav>
		</header>
		<div id="maincontent">
			<h1>About Us</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
		<aside id="sidebar">
			<h3>About Us</h3>
			<p>Soccer Pickup is your source for finding local recreational soccer games for adults. Leagues are great - but sometimes you just want to lace up your boots and find an informal game. Check back often to find a game near you!</p>
		</aside>
		<footer id="footerinfo">
			<p>Soccer Pickup: Your guide to finding a game.</p>
		</footer>
	</div>
</body>
</html>

Code Explanation:

We use <link rel="apple-touch-icon" /> tags and a link to a manifest.json file to set the appropriate icons from the images/icons directories (one each for iOS icons and Android icons) as the icon associated with this page.