Генератор фавиконов — быстрая генерация иконок и установка их на MODX

У меня уже была статья: Подробное руководство по фавикону где я рассказывал: что это такое, где искать изображения для иконок и т.д. В рамках данного урока чисто практика: генерация иконок под различные устройства и браузеры при помощи сервиса real favicon generator.

Для создания идеальных иконок: нам нужна качественная квадратная иконка, желательно png (не менее 260x260px), а в идеале SVG.

Автогенерация иконок из SVG, PNG, JPG картинок и кода для вставки на сайт

Идем на сайт realfavicongenerator.net, в правом углу жмем по кнопке «Select your Favicon image» выбираем заранее скачанное изображение или SVG иконку.

После чего сервис откроет страницу с настройками иконок под различные устройства. На настройках останавливаться не буду, там все понятно, можно разобраться методом тыка. Остановимся на последней настройке «Favicon Generator Options» а конкретно на вкладке «Patch» — здесь рекомендую переключить его в положение «I cannot or I do not want to place favicon files at the root of my web site. Instead I will place them here:» и указать абсолютный путь до папку куда загрузите иконку, например иконки в моем случае будут храниться в «template/img/icons», следовательно путь указываем такой: «/template/img/icons», а еще лучше прям с протоколом и доменом, например: «https://web-revenue.ru/template/img/icons». После чего нажимаем на кнопку «Generate your Favicons and HTML code».

После чего сервис сгенерирует для вас пакет иконок и готовый для вставки на сайт код.

Скачиваем пакет иконок на ПК, нажав на кнопку «Favicon package» и копируем готовый код.

Установка иконок на MODX сайт

Открываем наш базовый шаблон base.tpl и вставляем ранее скопированный код в секцию head и сохраняем.

Кто защел не из курса, у вас скорее всего какой-нибудь чанк с именем типа «head» или «tpl».

Ну и остается закачать архив в указанную папку и распаковать. Закачать можно прям из админки.

В принципе из под админки можно и распаковать

← Предыдущая статьяMODX пакет SEO Suite: документация и настройка

Следующая статья →Создание файлового шаблона для статей