Mobile Touch Icon in HTML website can help user access your site easier by bring the site name and icon to the home screen. If you don’t know how to bring it to home, you can follow the instruction in the screenshot below when access a website in browser.
Our main topic don’t focus to how to bring the icon to home screen, it ‘s too easy :). We will focus to the programming part that how to control what icon will be show in home screen when users add our site to their home screen. Now, time to do the magic, let ‘s check this html code in head tags of html site.
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://joomla2x.com/wp-content/uploads/2014/09/joomla2x-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="http://joomla2x.com/wp-content/uploads/2014/09/joomla2x-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://joomla2x.com/wp-content/uploads/2014/09/joomla2x-72x72.png" />
<link rel="apple-touch-icon-precomposed" href="http://joomla2x.com/wp-content/uploads/2014/09/joomla2x-57x57.png" />
If you view source of this site, you will see the code above is the code I am using for my site too. It will control 4 size types of touch devices and they all sizes you need to support. This code line will show the icon and as below
That ‘s it. It ‘s quite easy to control the Mobile touch icon.
And as always, welcome any comment.