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


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)

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

iPad home screen icon (favicon-72.png)

iPhone retina (favicon-120.png)

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

IE10 Metro tile  (favicon-144.png)