Touch icon for mobile devices

To add a Touch Icon to your Blog or website, simply create the file favicon.ico and upload it to the root of your domain. It’s better you don’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 an Explorer tag.

How to add a Touch icon to your site

touch-icon

To add an icon to your website 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)

<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 and Touch Icon Sizes

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

High-quality WordPress Themes to build your website

Building your blog, magazine, or shop is now easy with our Premium WordPress themes.
Otherwise, you can try our Free WordPress themes available from the official WordPress.org repository.

Category: CSS