Creating home screen shortcuts for your mobile web apps is a great way to quickly access them in the future. However, the default image for those shortcuts is a tiny screenshot of your app. This is ugly, and not very noticeable, especially surrounded by other apps with flashy icons. Your plain mobile web app icon is probably hard to find on your home screen. For example, look at our crazybikes icon below:
That sure doesn’t stand out at all. Surrounded by other icons, it’s rather hard to notice. Now, here’s what that same web app looks like with an icon:
Want to learn how to do that for your own mobile web apps? It’s actually quite simple. Just follow these steps.
1. Open your image editor
If you don’t have an image editor like Photoshop, there are plenty of capable online image editors to choose from. I recommend Pixlr.
2. Create a 144×144 file
In Pixlr, click “File>new”, and set the width and height to 144px.
3. Add a background color
Select a color to use for the background–usually one of your company colors. To select a color in Pixlr, click the colored rectangle at the bottom of the toolbar on the left. Once you have your color, apply it to your 144×144 square. In Pixlr, you’d use the paint bucket tool for this.
4. Add a logo/icon
If you have a company logo, or any other icon, you’ll want to place it in the center of your square. To do this in Pixlr, click “File>Open image”, and then select your image. Once you’ve opened your image, use the marquee tool to outline all or part of the image, and then copy and paste your selection in the 144×144 square. Adjust the size of your image to fit the square.
5. Save the file
Save this file as a png image. In Pixlr, click “File>save”, to pull up the save box. Name the image “apple-touch-icon” and select “png” as the file type. Click “Save” and select the file location to save it in.
6. Place the image in the appropriate directory
Put your image in a place that can be easily linked to from your mobile web app. Once you’ve done that, add this line to your mobile web apps section:
Code:
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
Obviously, you would replace “images” with whichever directory you’ve placed your image.
A couple of things to note
- This process may appear to be iOS specific, but it actually works for Android too.
- iOS devices automatically round the corners, add a drop shadow, and add a little shine to your icon. To disable this, change the rel to “apple-touch-icon-precomposed”.
- Technically, you should make 4 different icon sizes for each different screen resolution. Here’s the breakdown of each:
- The new iPad calls for a 144×144 icon
- The iPhone 4s calls for a 114×114 icon
- The first gen iPad uses a 72×72 icon
- Most other phones, including Android phones use a 57×57 icon
I chose to only make the largest icon, and let the other icons scale down. Since every icon is a perfect square, it will scale correctly.
Wrap up
That’s all there is to it! In a few minutes, I added a nice, native-looking icon to my mobile web app. This not only looks better, it also makes my web app easier to find and access.
Now that I have made this, how can I allow users to download this to their mobile devices?
When users add your mobile web app/site to their home screen, the icon will automatically appear.
On iOS devices, users have the option to add any web page to their home screen straight from the browser. On Android devices, they have to bookmark a page, and then add that bookmark to the home screen.