В данной статье мы с Вами поговорим о маленькой, но в то же время полезной детали любого хорошего сайта, иконке для CMS Joomla – favicon. Вы узнаете как добавить faviconна сайте, а так же изменить уже существующий.
Для тех, кто не знает favicon – это маленький значок (иконка) сайта, который отображается веб-браузером во вкладке непосредственно перед заголовком сайта, или если быть более точным, перед содержимым тега title. То есть по большому счету это изображение определенного формата и размера с расширением ico.
При этом согласитесь, что правильно подобранный favicon, придает сайту уникальности и неповторимости, а так же быстро запоминается пользователями. Поисковые системы, формируя список поисковой выдачи (список с результатами поиска), так же отображают favicon, перед заголовком сайта.
А значит, первое, что бросится в глаза пользователю, это как раз иконка – значок сайта, соответственно, даже не стоит говорить о том, что если пользователь увидит среди них знакомую – это подтолкнёт его на посещение сайта. Поэтому вопрос, как поменять фавикон в joomla 3, достаточно популярен среди новичков и далее я постараюсь привести подробный ответ.
Для обеспечения кроссбраузерности, создавая favicon, как правило, выбирают формат изображения ico, потому как он поддерживается абсолютно всеми браузерами. Хотя сейчас современные браузеры поддерживают такие форматы как PNG и GIF, а Mozilla FireFox еще и JPEG, а также Анимированный GIF. Но, так или иначе, встречаются пользователи, которые используют устаревшие версии веб-браузеров, поэтому на мой взгляд, стоит все же использовать общепринятый формат ico.
Определившись с форматом, давайте выясним размер изображения, которое может использоваться в качестве значка сайта. Здесь все просто, размер favicon довольно “стандартен” и составляет 16х16 пикселей, если необходимо обеспечить максимальную кроссбраузерность. При этом для различных мобильных устройств и их специфических браузеров, можно использовать значки размером 32×32, 96×96 и даже 192×192 пикселей.
Теперь давайте поговорим о том, как установить фавикон на сайт Joomla. Но, так как иконки пока у нас нет, давайте ее создадим. Наиболее удобный способ создания — это использование on-line генераторов, так как тем самым Вы избавляете себя от установки дополнительного программного обеспечения, и как правило, данные сервисы вместе с созданными иконками предлагают скопировать код, который необходим для отображения значка.
Один из популярнейших сервисов по созданию иконок favicon, в данное время – это генератор favicon.ru, который мы с Вами и используем в данной статье. Так же довольно неплохой генератор favicon-generator (favicon-generator.org), который вместо одной иконки, создает целый архив в котором сгенерированы значки различных размеров. Соответственно для каждого размера, так же приводится код подключения.
Для создания favicon, выберем следующее изображение.
Далее переходим на сайт favicon.ru.
Теперь достаточно загрузить выбранное изображение, с помощью специальной формы и по большому счету генерация будет завершена.
После загрузки изображения, выбираем интересующую область, из которой будет сформирована иконка и нажимаем“Далее”.
После генерации, Вы можете увидеть пример отображения нового favicon в браузере и если вид Вас устраивает, кликаете по кнопке “Скачать favicon”, для скачивания файла. Таким образом, иконка готова.
Фавикон в джумле – располагается в корне каталога активного шаблона. К примеру, для шаблона Beez3, это папка — templates\beez3. А значит, скачанный файл достаточно поместить в указанную папку, тем самым заменив стандартный значок, и обновить информацию в браузере. Код, который отображает favicon в браузере, генерируется непосредственно движком Joomla, поэтому в ручную, его прописывать не нужно. Кому интересно уточню, что данный код формируется по адресу \libraries\joomla\document\html, в файле html.php. Для отображения иконки, в ядре Joomla предусмотрен специальный метод, под названием addFavicon(), который и вызывается в выше указанном файле.
Теперь, Вы знаете как поменять favicon в joomla 3, единственное хотел бы, так сказать для общего развития, привести код, для отображения иконки – дляслучая, если Вам нужно будет прописывать его вручную.
<link rel="shortcut icon" href="/templates/beez3/favicon.ico" type="image/x-icon">
Как Вы понимаете в атрибуте href, тега link, необходимо указать путь к изображению favicon.
На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!
