Главная arrow Программирование arrow HTML arrow Joomla: как сделать иконку сайта, которая видна в адресной строке браузера Sunday, October 22 2017  
ГлавнаяКонтактыАдминистрированиеПрограммированиеСсылки
UK-flag-ico.png English Version
GERMAN-flag-ico.png Die deutsche Version
map.gif карта сайта
нашли опечатку?

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

Поделиться:

Joomla: как сделать иконку сайта, которая видна в адресной строке браузера Версия для печати
Написал microsin   
13.12.2009

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

Картинка, которая имеется в виду, называется 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></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.

[Ссылки

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

Последнее обновление ( 16.09.2011 )
 

Комментарии  

  1. #2 Apostol_5
    2013-03-2311:10:58 Спасибо, буду пробовать.
  2. #1 Аморалекс
    2011-09-3000:47:48 А что делать, если иконка не хочет перезаписыватьс я, даже права на файл невозможно изменить и удалить сам файл? Смена шаблона не помогла.

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

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

:D:lol::-);-)8):-|:-*:oops::sad::cry::o:-?:-x:eek::zzz:P:roll::sigh:

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

< Пред.   След. >

Top of Page
 
microsin © 2017