Adding an Icon to the Home Screen

Hopefully, users will want to add an icon for your webapp to their home screens (this is called a "launcher icon"). They do this by bookmarking your app and adding a bookmark shortcut to their home screens. This is the same process they use to add any bookmark to their home screens. The difference is that we're going to specify a custom image to display in place of the default bookmark icon.

First, upload a .png image file to your website. To maintain a consistent visual weight with other launcher icons, it's recommended that the file be 56px x 56px if its visible area is basically square, and 60px x 60px otherwise. You'll have to experiment with your specific graphic to settle on the perfect dimensions.

Because Android is built to run on many different devices with a variety of screen sizes and pixel densities, creating icons that look good everywhere is fairly involved. For detailed instructions and free downloadable templates, please visit the Icon Design page on the Android developer site (http://developer.android.com/guide/practices/ui_guidelines/icon_de sign.html#launcherstructure).

Next, add the following line to the head section of the "traffic cop" HTML document, android.html (replace myCustomIcon.png with the absolute or relative path to the image): <link rel="apple-touch-icon-precomposed" href="myCustomIcon.png" />

As you might have noticed, this is an Apple-specific directive that has been adopted by Android.

0 0

Post a comment