Программирование HTML Joomla: как сделать иконку сайта, которая видна в адресной строке браузера Wed, April 26 2017  

Поделиться

нашли опечатку?

Пожалуйста, сообщите об этом - просто выделите ошибочное слово или фразу и нажмите Shift Enter.


Joomla: как сделать иконку сайта, которая видна в адресной строке браузера Печать
Добавил(а) microsin   

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

Картинка, которая имеется в виду, называется Favicon. Вот пример отображения этой картинки в браузере:
favicon-joomla01.PNG

Отличная статья по этой теме находится в Википедии - http://ru.wikipedia.org/wiki/Favicon. Наша задача - добавить на каждую страничку в блок < head> тег < link rel="icon" type="image/png" href="/someimage.png" />. Для отображения Favicon в шаблонах Joomla, а также в коде /inclides/frontend.php обычно уже сгенерирован соответствующий код. Нам остается просто найти и подправить это место. Итак, процесс по шагам для Joomla версии 1.0.12.

1. Делаем картинку 16x16 или 32x32 и с 8-битной или 24-битной глубиной цвета, формат png или gif. Самое простое - сконвертировать готовую картинку в знакомом графическом редакторе (Photoshop, ACDSee, Picasa и т. д.). Я выбрал 32x32, цвет 8 бит, формат gif. Сохраняем созданную картинку под именем favicon32x32-8b.gif, записываем её в папку с картинками /images относительно корня сайта (для тех, кто в танке - корень сайта - это там, где находятся файлы index.php, index2.php, configuration.php).
favicon32x32-8b.gif

2. Открываем html-код текущего шаблона. В админке Joomla идем в меню Сайт -> Шаблоны -> Шаблоны сайта. Смотрим, на каком из шаблонов в списке стоит зеленая галка (столбец Умолчание) - этот шаблон сейчас работает у нас на сайте. Выбираем этот шаблон, поставив напротив него радиокнопку, и жмем кнопку "Правка HTML".

3. Откроется простейший текстовый редактор, в котором будет отображен html-код шаблона. Ищем секцию < head>, а внутри этой секции тег наподобие < link rel="shortcut icon" href="/< ?php echo $mosConfig_live_site;?>/images/favicon.ico" />. В этом примере формат Favicon задан как icon, переменная $mosConfig_live_site (она задана в файле configuration.php) установлена в значение http://microsin.ru, а картинка, которая сейчас применена в качестве Favicon, лежит в файле /images/favicon.ico. В нашем примере нам всего лишь надо исправить эту строчку так, чтобы формат был gif, а картинка favicon32x32-8b.gif:

< link rel="shortcut gif" href="< ?php echo $mosConfig_live_site;? >/images/favicon32x32-8b.gif" />

На этом процедура завершена, теперь в строке адреса и на закладках браузера будет красоваться нужная нам картинка.

Кроме шаблона, иконка favicon иногда выводится блоком кода /includes/frontend.php, поэтому тег < link rel="shortcut .. > может дублироваться. Например, код в файле frontend.php может быть такой:

..
    // favourites icon
    if ( !$mosConfig_favicon )
    {
        $mosConfig_favicon = 'favicon.ico';
    }
    $icon = $mosConfig_absolute_path .'/'. $mosConfig_favicon;
    // checks to see if file exists
    if ( !file_exists( $icon ) )
    {
        $icon = $mosConfig_live_site .'/favicon.ico';
    }
    else
    {
        $icon = $mosConfig_live_site .'/' .$mosConfig_favicon;
    }
    // outputs link tag for page
    ?>
    < link rel="shortcut icon" href="/< ?php echo $icon;? >" />
..

Здесь все очевидно - из переменных файла configuration.php вычисляется путь до файла иконки, и в html выводится тег link rel. Я не знаю, нужно ли оставлять такое дублирование, и на всякий случай оставил. Поэтому тег link rel у меня на сайте сгенерирован дважды:

..
< head >
..
    < link rel="shortcut icon" href="http://microsin.ru/favicon.ico" />
..
    < !-- < link rel="shortcut icon" href="http://microsin.ru/images/favicon.ico" /> -- >
    < link rel="shortcut gif" href="http://microsin.ru/images/favicon32x32-8b.gif" />
< /head >
..

В случае дублирования тега link rel проверьте корректность обоих путей до файла картинки, и соответствие её формата тому, который указан в теге. То есть, для данного примера файлы favicon.ico и favicon32x32-8b.gif должны лежать именно там, где указано в теге, и их формат должен быть соответственно icon и gif.

[favicon в Joomla 1.7]

Настроить картинку favicon для Joomla 1.7 намного проще - в каждом шаблоне (в папке шаблона) находится файл favicon.ico, который нужно просто подменить на другой. Например, у меня стоял шаблон beez_20, и я заменил оригинальный файл /templates/beez_20/favicon.ico на свой собственный, после чего сайт заработал с новой картинкой favicon.

[Ссылки]

1. Freeware редактор иконок Icon Editor (автор SoftwarePile.com). Программа понимает файлы BMP, и может создавать из них иконки и курсоры.

 

Комментарии  

 
0 #1 Аморалекс 30.09.2011 03:47
А что делать, если иконка не хочет перезаписыватьс я, даже права на файл невозможно изменить и удалить сам файл? Смена шаблона не помогла.

microsin: у Вас должны быть ПОЛНЫЕ права на манипуляции с файлами на хостинге. Добивайтесь этого от провайдера.
Цитировать
 

Добавить комментарий


Защитный код
Обновить

Top of Page