Вчера мы добавили название сайта во вкладке браузера для своего сайта на MODX Revolution. После этого было бы неплохо добавить Favicon, т.е. иконку сайта, которая также будет отображаться во вкладке браузера.
На самом деле, добавление 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 картинки.
Статьи по теме: