1. Adding a Retina favicon is quick and simple, so we'll start with that. To add a highdefinition 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 the favicon.icofile in the root directory of your site.
2. 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.png
‰ 114 x 114 pixels – apple-touch-icon-114x114-precomposed.png
‰ 72 x 72 pixels – apple-touch-icon-72x72-precomposed.png
‰ 57 x 57 pixels – apple-touch-icon-precomposed.png
3. 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" />
4. Next within the <head>tag we'll add the code for each of these icons.
<link rel="apple-touch-icon-precomposed" href="apple-touch-iconprecomposed.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" />
5. 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.png
‰ 2048 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.png
‰ 1024 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.png
‰ 640 x 920 pixels – apple-touch-startup-image@2x.png
‰ 320 x 460 pixels – apple-touch-startup-image.png
6. 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="(devicewidth: 320px) and (-webkit-device-pixel-ratio: 2)" rel="appletouch-startup-image">
<link href="apple-touch-startup-image@2x.png" media="(devicewidth: 320px) and (device-height: 568px) and (-webkit-devicepixel-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>
7. Finally we'll add a paragraph after the <head>tag so that our website has some content.
<p>Testing out some app icons</p>
8. 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.
Không có nhận xét nào:
Đăng nhận xét