High-resolution web apps (Should know)
When creating web apps you'll want to provide icons and startup images for users that save your app to their home screen. If you don't add these icons your site will just be represented by a screenshot, which is not ideal. When dealing with Retina device icons we can also upgrade our favicon, which is displayed in your browser tab next to the page title. This recipe will show you how to add Retina favicons, app icons, and startup images to your site.
Getting ready
To get started we'll need to create a few graphics. Within your graphics editor, create a 32 x 32 pixel image for your favicon. This is typically a logo or an image that you feel represents your site.
Next create an app icon that is square and at least 144 x 144 pixels. A vector graphic is ideal for this icon so you can easily resize it without having to worry about the image quality. You have the option of rounding the corners of the icon yourself, or you can let the device round the corners for you. For this example we'll round the icon ourselves.
The corner radius of your rounded square should be 25.263 pixels to match Apple's icon styles. The formula to figure out the radius for any icon size is: 10/57 x icon size = radius. There are also a number of iOS icon templates that can be found online to help you get started.
Finally, create a startup image at 1536 x 2048 pixels. This image will be used for iPad and iPhone and needs to be resized, so working with vector art is ideal. This image will be displayed when the user launches your site, if you allow it to be run as a web app.
How to do it...
Adding a Retina favicon is quick and simple, so we'll start with that. To add a high-definition favicon you'll just need to save your 32 x 32 image as an
.icofile. If your graphics editor doesn't let you save in that format then save it as a PNG instead. You can find tools online to convert the file from PNG to ICO, such as http://www.icoconverter.com/. Put thefavicon.icofile in the root directory of your site.Next save your app icon as four PNG files in the
/retina/folder with the following sizes and names:144 x 144 pixels –
apple-touch-icon-144x144-precomposed.png114 x 114 pixels –
apple-touch-icon-114x114-precomposed.png72 x 72 pixels –
apple-touch-icon-72x72-precomposed.png57 x 57 pixels –
apple-touch-icon-precomposed.png
After you've created all four app icons, create a new HTML document called
appIcons.htmlinside the/retina/folder. Within the<head>tag of the basic HTML structure we'll add the code to run as a web app.<head> <meta name="apple-mobile-web-app-capable" content="yes" />
Next within the
<head>tag we'll add the code for each of these icons.<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" /> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png" /> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png" /> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png" />
Then we'll add your startup images. Save your startup image as seven different PNG files inside the
/retina/folder with the following sizes and names:1536 x 2008 pixels –
apple-touch-startup-image-1536x2008.png2048 x 1496 pixels (landscape) –
apple-touch-startup-image-1496x2048.png(rotate this image 90 degrees clockwise before saving)768 x 1004 pixels –
apple-touch-startup-image-768x1004.png1024 x 748 pixels (landscape) –
apple-touch-startup-image-748x1024.png(rotate this image 90 degrees clockwise before saving)640 x 1096 pixels –
apple-touch-startup-image-640x1096.png640 x 920 pixels –
apple-touch-startup-image@2x.png320 x 460 pixels –
apple-touch-startup-image.png
Now we'll add the code inside the
<head>tag to display our startup images.<link href="apple-touch-startup-image.png" media="(device-width: 320px)" rel="apple-touch-startup-image"> <link href="apple-touch-startup-image@2x.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <link href="apple-touch-startup-image@2x.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image"> <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image"> <link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 768px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <link href="apple-touch-startup-image-1496x2048.png" media="(device-width: 768px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> </head>
Finally we'll add a paragraph after the
<head>tag so that our website has some content.<p>Testing out some app icons</p>
If you open this page on your device and save it to your home screen as an app (in the Safari browser in your mobile press the box and arrow icon) you'll see the icon and startup image displayed.
How it works...
The first item we created was a favicon to show in bookmarks and the browser title. Normally favicons are 16 x 16 pixel files named favicon.ico that are uploaded to the root directory of your site. The Retina ICO file is double the amount of pixels. Browsers will automatically look for this filename within the root directory of your site.
Next we set up our site to run as a web app and gave it the necessary images. The apple-mobile-web-app-capable value for the <meta> tag tells the device that your site can function in full screen. If you're going to use this setting make sure you have all the appropriate navigation built in so the user doesn't need the back button. When the web app is saved to the home screen it will use the images that we specified in our code.
The first set of images we added create an app icon for our site. The browser will take the largest of these icons that it is able to display. These icons accommodate both iPhone and iPad screens. By including these in your code you can provide any filename for the images or location. If you save them with the filenames we used and save them in the root directory of your site, you wouldn't need to put in the code because the browser will look for them there.
Finally, we added some startup images. These will be displayed while your web app is loading. The sizes we added accommodate the three variations of iPhones (regular, Retina, and iPhone 5) and both iPad screen types in landscape and portrait. It's important to rotate your landscape images 90 degrees clockwise (so they are in a vertical orientation) before saving them, so they will load correctly. We implemented these using a media query to display the correct image based on the devices' specifications and orientations.
There's more...
On the iPhone 5 you may find that your web app won't load in full screen. This issue is due to the viewport value of the <meta> tag. If you have a width set in this tag it will prevent the iPhone from properly scaling the app. Remove that setting and the issue should be resolved.
