I recently discovered how easy it is to create a mobile icon for my mobile site. It literally takes 3 steps and about 5 minutes (or less). Smartphone users often bookmark sites they like and if they really like your site, they’ll create a mobile icon for their home screen. I suggest putting your logo or something they can recognize your site by. People don’t like to read. They like attractive images that they can associate your brand with. We use a star for our mobile web icon. It is simple and something that a user remembers our brand by.
Steps to Create a Mobile Icon
You’re going to love this tip. A mobile icon is so easy to make it’s silly! It will make your site stand out from the rest. Here you go folks, enjoy!
- Create a mobile icon that is 158px X 158px. Make it a PNG. Here’s a link to mine, Mobile Icon File. If it makes it easier, download the image from my link and change the logo.
- Insert this code to in between your tags:
. - Upload your image to the images folder on your host (or the place you store your images). You’ll also have to upload the mobile web files you edited. In our case we added this code to the index.html file and then uploaded it.
If you have a smart phone, test out your mobile icon. For an iPhone you would surf to your website and then click on the bookmark button. A window will pop up and select, Add to Home Screen. Add in a title and your mobile icon will appear right on your iPhone. It’s like magic!
Additional Tip for Mobile Designers: This makes a great selling point when you’re trying to land a mobile website deal. Some business owners are caught up on, “I want an app.” I’m sure all the designers out there have heard that stinkin line before! Now if you design apps you can make some decent cash on the deal but for myself I’m strictly mobile web. Won’t they don’t realize is that most apps for small businesses are overkill. Plus it will cost them a lot more money to create. Show them a sample site with this cool mobile web icon feature. It will make their mobile site look just like an app! Show them how easy it is to get their mobile icon to a users home screen. It takes about the same time to download an app if not quicker!
If you find that this mobile icon tip doesn’t work on a particular smart phone please tell us about it. Unfortunately we cannot test on all devices but can look into a solution. Please recommend this page to all your designer fans.. Trust me they will thank you! It’s such a simple tip that anyone with light HTML experience can implement.
Mobile Icon Setup VIDEO
Watch the video for Step by Step instructions for setting up your new and cool mobile icon.
List your site below so we can see your cool new mobile icon! I’d love to see what you have created and sharing ideas always helps with inspiration for others.
Did not work for me with rel mobile-icon but does work with rel apple-touch. I’m using a Motorola Photon… Do you know of away to make it go directly to the APP Icon page. As of now I have to add it to my front screen like adding a widget from the bookmark section which a lot of people will not figure that out. They will just assume if they don’t see it with the other app icons it’s not there.
Thanks in advance
Sorry for the late reply. I’m looking into this.