Favicon formats and sizes, as well as relevant markup and links so you never have to do this again
modern user agent support markup:
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-152x152-precomposed.png" />
<link rel="icon" href="favicon-096.png" />
<!--[if IE]><link rel="shortcut icon" href="favicon.ico" /><![endif]-->
<meta name="msapplication-TileColor" content="#fcda3e" />
<meta name="msapplication-TileImage" content="favicon-144-trans.png" />
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-152x152-precomposed.png" />
if you don't care about wpo, ios takes care of everything
<link rel="icon" href="favicon-096.png" />
most browsers
<!--[if IE]><link rel="shortcut icon" href="favicon.ico" /><![endif]-->
trident cc
<meta name="msapplication-TileColor" content="#fcda3e" />
<meta name="msapplication-TileImage" content="favicon-144-trans.png" />
tiles in windows 8. they work best as transparent images, so notice the background color is placed in meta element and actually taken out of the favicon
relevant references:
http://mathiasbynens.be/notes/touch-icons
http://tools.dynamicdrive.com/favicon/
http://www.kevinleary.net/cross-browser-favicons/
https://gist.github.com/eighttrackmind/7743482