All credit is attributed to Audrey Roy and his favicon-cheat-sheet
For the main favicon itself, it's best for cross-browser compatibility not to use any HTML. Just name the file favicon.ico and place it in the root of your domain.
| <link rel="apple-touch-icon-precomposed" sizes="152x152" href="/apple-touch-icon-152.png"> | |
| <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144.png"> | |
| <link rel="apple-touch-icon-precomposed" sizes="120x120" href="/apple-touch-icon-120.png"> | |
| <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114.png"> | |
| <link rel="apple-touch-icon-precomposed" sizes="76x76" href="/apple-touch-icon-76.png"> | |
| <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72.png"> | |
| <link rel="apple-touch-icon-precomposed" sizes="60x60" href="/apple-touch-icon-60.png"> | |
| <link rel="apple-touch-icon-precomposed" sizes="57x57" href="/apple-touch-icon-57.png"> | |
| <link rel="apple-touch-startup-image" href="/apple_startup_image.png"> | |
| <link rel="icon" type="image/png" href="/favicon-16.png" sizes="16x16"> | |
| <link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32"> | |
| <link rel="icon" type="image/png" href="/apple-touch-icon-57.png" sizes="57x57"> | |
| <link rel="icon" type="image/png" href="/apple-touch-icon-72.png" sizes="72x72"> | |
| <!-- GoogleTV icon --> | |
| <link rel="icon" type="image/png" href="/favicon-96.png" sizes="96x96"> | |
| <link rel="icon" type="image/png" href="/apple-touch-icon-120.png" sizes="120x120"> | |
| <!-- Chrome Web Store icon --> | |
| <link rel="icon" type="image/png" href="/favicon-128.png" sizes="128x128"> | |
| <!-- IE10 Metro tile for pinned site if not using "msapplication-TileImage" --> | |
| <link rel="icon" type="image/png" href="/apple-touch-icon-144.png" sizes="144x144"> | |
| <link rel="icon" type="image/png" href="/apple-touch-icon-152.png" sizes="152x152"> | |
| <link rel="icon" type="image/png" href="/favicon-160.png" sizes="160x160"> | |
| <link rel="icon" type="image/png" href="/favicon-196.png" sizes="196x196"> | |
| <!-- Opera Speed Dial icon --> | |
| <link rel="icon" type="image/png" href="/favicon-195.png" sizes="195x195"> | |
| <!-- Opera Coast icon --> | |
| <link rel="icon" type="image/png" href="/favicon-228.png" sizes="228x228"> | |
| <!-- Microsoft Metro tiles --> | |
| <meta name="msapplication-TileColor" content="#be1e2d"> | |
| <meta name="msapplication-TileImage" content="/favicon-144.png"> | |
| <!-- SVG Favicon if/when they are supported --> | |
| <link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any"> |
| link( rel='apple-touch-icon-precomposed', href='/assets/img/favicons/apple-touch-icon-152.png', sizes='152x152' ) | |
| link( rel='apple-touch-icon-precomposed', href='/assets/img/favicons/apple-touch-icon-144.png', sizes='144x144' ) | |
| link( rel='apple-touch-icon-precomposed', href='/assets/img/favicons/apple-touch-icon-120.png', sizes='120x120' ) | |
| link( rel='apple-touch-icon-precomposed', href='/assets/img/favicons/apple-touch-icon-114.png', sizes='114x114' ) | |
| link( rel='apple-touch-icon-precomposed', href='/assets/img/favicons/apple-touch-icon-76.png', sizes='76x76' ) | |
| link( rel='apple-touch-icon-precomposed', href='/assets/img/favicons/apple-touch-icon-72.png', sizes='72x72' ) | |
| link( rel='apple-touch-icon-precomposed', href='/assets/img/favicons/apple-touch-icon-60.png', sizes='60x60' ) | |
| link( rel='apple-touch-icon-precomposed', href='/assets/img/favicons/apple-touch-icon-57.png', sizes='57x57' ) | |
| link( rel='apple-touch-startup-image', href='/assets/img/favicons/apple_startup_image.png' ) | |
| link( rel='icon', type='image/png', href='/assets/img/favicons/favicon-16.png', sizes='16x16' ) | |
| link( rel='icon', type='image/png', href='/assets/img/favicons/favicon-32.png', sizes='32x32' ) | |
| link( rel='icon', type='image/png', href='/assets/img/favicons/apple-touch-icon-57.png', sizes='57x57' ) | |
| link( rel='icon', type='image/png', href='/assets/img/favicons/apple-touch-icon-72.png', sizes='72x72' ) | |
| //- GoogleTV icon | |
| link( rel='icon', type='image/png', href='/assets/img/favicons/favicon-96.png', sizes='96x96' ) | |
| link( rel='icon', type='image/png', href='/assets/img/favicons/apple-touch-icon-120.png', sizes='120x120' ) | |
| //- Chrome Web Store icon | |
| link( rel='icon', type='image/png', href='/assets/img/favicons/favicon-128.png', sizes='128x128' ) | |
| //- IE10 Metro tile for pinned site if not using "msapplication-TileImage" | |
| link( rel='icon', type='image/png', href='/assets/img/favicons/apple-touch-icon-144.png', sizes='144x144' ) | |
| link( rel='icon', type='image/png', href='/assets/img/favicons/apple-touch-icon-152.png', sizes='152x152' ) | |
| link( rel='icon', type='image/png', href='/assets/img/favicons/favicon-160.png', sizes='160x160' ) | |
| link( rel='icon', type='image/png', href='/assets/img/favicons/favicon-196.png', sizes='196x196' ) | |
| //- Opera Speed Dial icon | |
| link( rel='icon', type='image/png', href='/assets/img/favicons/favicon-195.png', sizes='195x195' ) | |
| //- Opera Coast icon | |
| link( rel='icon', type='image/png', href='/assets/img/favicons/favicon-228.png', sizes='228x228' ) | |
| //- Microsoft Metro tiles | |
| meta( name='msapplication-TileColor', content='#be1e2d' ) | |
| meta( name='msapplication-TileImage', content='/favicon-144.png' ) | |
| //- SVG Favicon if/when they are supported | |
| link( rel='icon', type='image/svg+xml', href='/favicon.svg', sizes='any' ) |
I would love to see server logs on how often some of these get hit.