Фавиконы уже давным-давно существуют в вебе (это такие маленькие иконки возле названия вкладки или в результатах поиска в яндексе), но, поскольку многие сайты в наше время стали веб-приложениями и они работают на куче разных устройств, стало нормальной практикой рисовать для них иконки разных размеров и форм-факторов.

Канонические фавиконы

С незапямятных времен у сайтов был favicon.ico, который содержал несколько .png файлов разных размеров (потому что уже тогда они служили и иконками для рабочего стола). После введения в HTML5 аттрибута sizes, мы больше не пакуем .png файлы в один .ico, сегодня фавиконы всегда в .png. Но каких же размеров они должны быть?

  • 16x16 для адресной строки браузера
  • 32x32 для таскбарного ярлыка
  • 96x96 для ярлыка на рабочий стол (и Google TV)

В HTML это выглядит вот так:

  <link rel="icon" type="image/png" href="https://cdn.yourwebsite.com/favicon-16x16.png" sizes="16x16">
  <link rel="icon" type="image/png" href="https://cdn.yourwebsite.com/favicon-32x32.png" sizes="32x32">
  <link rel="icon" type="image/png" href="https://cdn.yourwebsite.com/favicon-96x96.png" sizes="96x96">

Для техники Apple

В iOS есть функция добавления иконки на домашний экран, что по сути делает веб-сайт приложением (оно даже скрывает строку адреса и прочие признаки браузера), вот размеры для них:

  • 120x120: iPhone Retina (iOS 7)
  • 152x152: iPad Retina (iOS 7)
  • 167x167: iPad Pro (iOS 8+)
  • 180x180: iPhone 6 Plus (iOS 8+)

В разметке будет выглядеть так:

  <link rel="apple-touch-icon" href="older-iPhone.png"> // 120px
  <link rel="apple-touch-icon" sizes="180x180" href="iPhone-6-Plus.png">
  <link rel="apple-touch-icon" sizes="152x152" href="iPad-Retina.png">
  <link rel="apple-touch-icon" sizes="167x167" href="iPad-Pro.png">

За дополнительной информацией обращайтесь к документации Apple, там написано про кастомизацию названия и многое другое.

А обязательно это всё размещать в <head>?

Нет. Если иконки размещаются в корне сайта, эпловская техника найдет их сама, и не только эпловская, Android тоже.

Windows Metro

В Windows 8.1 интерфейс Metro использует тайлинговый формат иконок, которые немного сложнее реализовать, по сравнению с другими методами. Начнем с их размеров:

  • 70x70
  • 270x270
  • 310x150
  • 310x310

Файл browserconfig.xml со следующим кодом нужно разместить в корне сайта:

  <?xml version="1.0" encoding="utf-8"?>
  <browserconfig>
    <msapplication>
      <tile>
        <square70x70logo src="https://cdn.yourwebsite.com/mstile-70x70.png"/>
        <square150x150logo src="https://cdn.yourwebsite.com/mstile-270x270.png"/>
        <square310x310logo src="https://cdn.yourwebsite.com/mstile-310x310.png"/>
        <wide310x150logo src="https://cdn.yourwebsite.com/mstile-310x150.png"/>
        <TileColor>#2b5797</TileColor>
      </tile>
    </msapplication>
  </browserconfig>

Это вольный адаптированный перевод статьи Here’s Everything You Need to Know About Favicons in 2017

Генератор всего перечисленного :)

Можно воспользоваться простым и гибким инструментом для генерации всех необходимых иконок и файлов RealFaviconGenerator, и вздохнуть с облегчением!