Touch icon for mobile devices

To add a favicon to yourBlog or Web site, simply create the file favicon.ico” and upload it to the root of your domain. It’s better you dont’t use any HTML tags, for cross-browser compatibility.
Many web sites have this code:

<link rel="shortcut icon" href="/favicon.ico" />

The “shortcut”  link tag it’s not a standard tag. It  doesn’t appear in the Link types HTML5 specification because this is on the fact a Explorer tag.

Touch icon

touch-icon

To add a Touch Icon to your Web site put this code in the <head> tag:

iOS 2.0+ and Android 2.1+ (Apple Touch Icon)

<link rel="apple-touch-icon-precomposed" href="/favicon-152.png">

IE 10 (Metro icon, the equivalent of Apple Touch Icon)

<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-TileImage" content="/favicon-144.png">

Replace #000000  with your  favorite color and set the file path if it’s not in the root.

Favicon e Touch Icon Size

Desktop (favicon.ico)
16×16 & 32×32

iOS/Android icon ( favicon-152.png)
152×152

iPad retina (favicon-152.png)
152×152  (Change for iOS 7: up from 144×144)

iPad home screen icon (favicon-72.png)
72×72

iPhone retina (favicon-120.png)
120×120

Standard iOS home screen: iPod Touch, first iPhone generation until 3G version (favicon-57.png)
57×57

IE10 Metro tile  (favicon-144.png)
144×144