A Home Screen Icon for the Jazz Calendar Site: iOS

Contact Us or call 1-877-932-8228
A Home Screen Icon for the Jazz Calendar Site: iOS

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.

Next