Joomla: как сделать иконку сайта, которая видна в адресной строке браузера
Добавил(а) microsin
В статье описывается, как привязать к сайту картинку, уникально идентифицирующую сайт (например, сделанную на основе индивидуального логотипа сайта), чтобы эта картинка отображалась как в адресной строке браузера, так и на закладке открытой в браузере странички.
Картинка, которая имеется в виду, называется Favicon. Вот пример отображения этой картинки в браузере:
Отличная статья по этой теме находится в Википедии - 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).
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:
На этом процедура завершена, теперь в строке адреса и на закладках браузера будет красоваться нужная нам картинка.
Кроме шаблона, иконка 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="/< ?phpecho$icon;? >" />
..
Здесь все очевидно - из переменных файла configuration.php вычисляется путь до файла иконки, и в html выводится тег link rel. Я не знаю, нужно ли оставлять такое дублирование, и на всякий случай оставил. Поэтому тег link rel у меня на сайте сгенерирован дважды:
В случае дублирования тега 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.
Комментарии
microsin: у Вас должны быть ПОЛНЫЕ права на манипуляции с файлами на хостинге. Добивайтесь этого от провайдера.
RSS лента комментариев этой записи