Creating a custom icon for the ‘Add to Home Screen’ on iPhone

iPhone users have the ability to add an icon to their home screen that directly links to a website URL. If left alone, the icon image is generated from a screenshot of your website, which will usually look like this:

1. However, this icon can be customized, and after years of creating fav icons for desktop websites, why not customize the icon for mobile websites? Here’s how:
2. Create a 114px x 114px icon image – this larger size makes sure the icon is sharp even in Retina Display. Save it out as a png and load it onto the server in either the root directory or images path.

Apple automatically generates rounded corners and adds a glossy semi-circle on top, if you like that use this code:

<link rel="apple-touch-icon" href="imagefoldername/my-custom-icon.png"/>

If you hate glossy shine, tell Apple to step off with this code and your icon will remain how you designed it, but still :

<link rel="apple-touch-icon-precomposed" href="imagefoldername/my-custom-icon.png"/>

Now you have a fully custom experience for your mobile website users!

*Android users can add an icon to a screen that will directly link to a URL also, but the process is a little more complicated, so I am not sure how many users actually know it can be done. While iPhone users have a “Add to Home Screen” option in the same area as “Add Bookmark” while actually viewing a website, Android users can only add the icon from the actual screen. So the process is save a bookmark while viewing a website, then go to a screen that has an empty spot for an icon, long-press in that empty spot to open the “Add to Home Screen” option, choose “Shortcuts”, then “Bookmarks” and then pick the bookmark you just saved in your browser. Wow, that was long. But the good new is, for those users who actually go through this process, they will be fed the same custom icon from the code above as well.

Reference: Click here