favicon / start sreens for all browsers and devices [closed]

Question

I was wondering if i have everything covered to include all favicons / start splash screens for all browsers and devices?

Is this enough? Or what are the main ones I should be covering? Am i missing any below:

  <link rel="icon" href="/images/favicons/favicon.png">
  <link rel="apple-touch-icon" href="/images/favicons/touch-icon-iphone.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/images/favicons/touch-icon-ipad.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/images/favicons/touch-icon-iphone-retina.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/images/favicons/touch-icon-ipad-retina.png">
  <meta name="application-name" content="site">
  <meta name="msapplication-TileColor" content="#ffffff">
  <meta name="msapplication-square70x70logo" content="/images/favicons/msapplication-tiny.png">
  <meta name="msapplication-square150x150logo" content="/images/favicons/msapplication-square.png">
  <meta name="msapplication-wide310x150logo" content="/images/favicons/msap   plication-wide.png">
  <meta name="msapplication-square310x310logo" content="/images/favicons/msapplication-large.png"> 

Thanks

Answer 1

Classic favicon for desktop browsers

Drop a favicon.ico file in the root directory of your web site. It does not need to be declared and it is expected to contain 16x16, 32x32 and 48x48 pictures.

Modern browsers will also look for PNG icons. You can address most cases with:

<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">

iOS

If you combine iOS 6 and iOS 7 sizes, iPad and iPhone, and Retina and non-Retina, that gives you 8 Apple touch icons:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">

Android

Android Chrome uses the Apple touch icon. But it also documents a 196x196 PNG icon that will replace the touch icon... someday. So:

<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">

Windows 8.0 tile picture

<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

Windows 8.1 tile pictures

<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-square70x70logo" content="/images/favicons/msapplication-tiny.png">
<meta name="msapplication-square150x150logo" content="/images/favicons/msapplication-square.png">
<meta name="msapplication-wide310x150logo" content="/images/favicons/msapplication-wide.png">
<meta name="msapplication-square310x310logo" content="/images/favicons/msapplication-large.png">

or use a browserconfig.xml dropped in the root of your web site (or declared in the head section), with the following content:

<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <TileColor>#da532c</TileColor>
    </tile>
  </msapplication>
</browserconfig>

The other guys

What about Google TV, Opera Speed dials and others? They expect PNG icons:

<link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
(...)

Generate these pictures and HTML code

You can generate all these pictures and HTML code at once. Full disclosure: I'm the author of this site.