И опять про favicon

И все же, как правильно прописать favicon в коде?

Просто favicon для браузера:

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

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

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

favicon для Apple:

<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">

а еще favicon для Win 8.0:

<meta name="msapplication-TileColor" content="#2b5797">

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

и для 8.1(browserconfig.xml):

<?xml version="1.0" encoding="utf-8"?>

<browserconfig>

  <msapplication>

    <tile>

      <square70x70logo src="/mstile-70x70.png"/>

      <square150x150logo src="/mstile-150x150.png"/>

      <square310x310logo src="/mstile-310x310.png"/>

      <wide310x150logo src="/mstile-310x150.png"/>

      <TileColor>#2b5797</TileColor>

    </tile>

  </msapplication>

</browserconfig>

Где же та "золотая середина" в вопросе favicon? favicon.ico или же favicon.png?

Поделитесь своими мыслями и примерами.