Почти все подключившиеся к Айри пользователи задают один и тот же вопрос: откуда у меня на сайте 404 ошибки к файлам favicon или browserconfig? Давайте на него ответим.

Немного истории

Файл favicon.ico (иконка сайта), размещенный в корне вашего сайта, с 1999 года используется браузерами для отображения в адресной строке или вкладке браузера и быстрой навигации (для пользователей). Также поисковая система Яндекс использует иконку сайта для результатов поисковой выдачи.

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

Разновидности иконок

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

• Классика 90-х. Файл /favicon.ico (который может содержать) в корне вашего сайта по-прежнему используется многими приложениями и старыми браузерами как иконка сайта. Отсутствие файла ведет к 404 ошибкам. В случае отсутствия этого файла на сайте Айри автоматически (на основании HTML-кода главной страницы) пытается найти подходящее изображение и помещает его на место иконки сайта.
• HTML5 иконки сайта. Для большинства браузеров необходимы иконки сайта, заданные через HTML5-расширение link с атрибутом sizes (например, <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">). Они могут быть больше по размеру чем классическая иконка и хорошо отображать сайт, например, при создании на него быстрой ссылки на рабочем столе. Также формат PNG существенно меньше ICO и поддерживает альфа-канал (полупрозрачность).
• Apple-иконки. Для Apple-устройств, однако, такой набор иконок не подойдет. Им нужны свои иконки (размеры от 57×57 до 180×180). Поэтому для исключения 404 ошибок при запросе с мобильных устройств Apple нужен дополнительный набор иконок.
• Windows 8 (MStile). Компания Microsoft решила не отставать от Apple и выпустила свою спецификацию для Windows8-иконок. Они имеют другие размеры и также должны задаваться через теги
• Windows 9 (browserconfig.xml). Чтобы избежать загромождения HTML-кода вызовами всех типов иконок Microsoft улучшила стандарт, и теперь Internet Explorer запрашивает файл browserconfig.xmlв корне сайта и определяет все подходящие иконки.

Для создания всего набора иконок из логотипа вы можете использовать, например, сервис RealFaviconGenerator или Favicon Generator.

Итоговый набор иконок

Файл favicon.ico уже не нуждается в особой декларации: современные браузеры поймут указания в HTML-коде, а для обратной совместимости файл все равно должен присутствовать в корне сайта.

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

<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">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon-precomposed" 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">

И содержимое файла browserconfig.xml (также все иконки должна присутствовать, TileColor также отвечает за фон иконки)

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