Adding Home Screen Icons to the Pickup Soccer Site - Exercise

Contact Us or call 1-877-932-8228
Adding Home Screen Icons to the Pickup Soccer Site - Exercise

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


<!DOCTYPE html>
	<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">

	<div id="container">
			<a href="index.html"><img src="images/logo.png" alt="Soccer Pickup" id="logo" /></a>
			<nav id="mainnav">
					<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>
		<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>
		<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>
		<footer id="footerinfo">
			<p>Soccer Pickup: Your guide to finding a game.</p>

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.