Mobile Touch Icon on HTML sites

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.

add-to-home-screen

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.

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

joomla2x-add-the-name

joomla2x-add-to-home

joomla2x-icon-home

joomla2x-website

That ‘s it. It ‘s quite easy to control the Mobile touch icon.

And as always, welcome any comment.

 

3 comments

  1. Nice sharing! I see you have cute background, is it your daughter?

  2. I see there many size instead of 4 sizes only. Do you think they are good enough for all screen resolution?

Leave a Reply

Your email address will not be published. Required fields are marked *

*