best practices for getting favicons everywhere

favicons.html

<!-- 
    Understanding the Favicon by Jonathan T. Neal
    http://www.jonathantneal.com/blog/understand-the-favicon/
-->

<link rel="apple-touch-icon" href="path/to/touchicon.png"> 
<link rel="icon" href="path/to/favicon.png"> <!-- 96x96 -->
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]--> <!-- 32x32 -->
<!-- or, set /favicon.ico for IE10 win -->
<meta name="msapplication-TileColor" content="#D83434">
<meta name="msapplication-TileImage" content="path/to/tileicon.png">

<!-- 
    Everything you always wanted to know about touch icons by Mathias Bynens
    http://mathiasbynens.be/notes/touch-icons
-->

<!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
<!-- For iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">