На самом деле, добавление Favicon для сайтов на MODX Revolution ничем не отличается от этой процедуры на всех прочих сайтах. Но, в качестве бонуса, вы узнаете, как можно добавить Favicon для вкладки с панелью управления MODX, что упростит навигацию по вкладкам уже лично Вам.
Стандартом считается размещение файла favicon.ico (англ. FAVorite ICON — значок для избранного) в корне сайта. Первоначально принимались изображения размером 16×16 пикселей, но сейчас допустимы также размеры 32×32 и 48×48 пикселей. Если указание на Favicon не задано явно в коде страницы, то тогда браузер будет искать именно favicon.ico в корне сайта. Этот вариант является очень простым. Единственным его минусом является то, что он задаёт Favicon только на весь сайт целиком. А если вам нужна иконка для отдельной страницы? Тогда второй вариант.
Мы можем разместить ссылку на Favicon в коде страницы между тегами <head> </head>. В таком случае уже не обязательно помещать изображение только в корень сайта. Да и формат изображения может быть не только ICO. Принимаются изображения формата ICO, PNG, APNG, JPEG, GIF (в том числе анимированные).
Вот пример Favicon в формате PNG, который располагается на сайте с MODX Revolution в каталоге assets/images:
<link rel="icon" type="image/png" href="/assets/images/primer.png" />
А вот пример Favicon в формате ICO. Обратите внимание на атрибут type.
<link rel="icon" type="image/vnd.microsoft.icon" href="/assets/images/primer.ico" />
Пример Favicon в GIF. Хотя Favicon может быть и анимированным, не стоит использовать слишком большой файл, так как он будет долго подгружаться.
<link rel="icon" type="image/gif" href="/assets/images/primer.gif" />
Отдельно стоит упомянуть про Favicon для смартфонов и планшетов. У таких иконок нестандартные размеры и немного отличаются атрибуты.
Для широкоформатных retina-экранов iPhone и iPad (144×144 пикселя):
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/assets/images/apple-touch-icon-144-precomposed.png">
Для iPhone и iPod touch (114×114 пикселей):
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/images/apple-touch-icon-114-precomposed.png">
Для iPad прошлых поколений (72×72 пикселя):
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/assets/images/apple-touch-icon-72-precomposed.png">
Для остальных устройств:
<link rel="apple-touch-icon-precomposed" href="/assets/images/apple-touch-icon-57-precomposed.png">
и
<link rel="shortcut icon" href="/assets/images/favicon.png">
Кроме того, как и обещал, расскажу как оборудовать иконкой вкладку с панелью управления MODX Revolution. Если вы положили favicon.ico в корень сайта, то иконка будет отображаться и на вкладке с панелью управления. Но, если вы хотите выделить вкладку с панелью управления MODX отдельной иконкой, откройте системные настройки CMS (меню с шестеренкой) и найдите там параметр URL фавиконки панели управления (manager_favicon_url).
Как сказано в подсказке к параметру, нужно указать путь относительно директории manager или абсолютный URL картинки.