Привет друзья!
Сегодня я хочу поделиться с вами простым решением как изменить текстовое название сайта на Ваш логотип.
Итак нам понадобиться:

• firebug
• хорошее настроение
• редактор типо notepad++ или sublime text, или любой другой с подсветкой синтаксиса
• ваш логотип в 3 вариантах

Поехали:
На сайте уже обсуждалось подобное (однако это не очень хорошо).
И я решил поискать свой вариант решения проблемы.
И так отправляемся в папку с нашим шаблоном, на ходим там файл header_top.tpl и

<h1 class="site-name"><a href="{cfg name='path.root.web'}">{cfg name='view.name'}</a></h1>

заменяем на

<h1 class="site-name"><a href="{cfg name='path.root.web'}"></a></h1>

Далее сохраняем это и отправляемся в папку images и загружаем туда 3 варианта логотипа.
Далее отправляемся в папку css находим там файл base.css
Находим там

/* Шапка сайта
---------------------------------------------------- */
#header .site-name 			{ font-size: 25px; line-height: 1em; float: left; padding-top: 11px; margin-right: 30px; margin-left: 18px; }
#header .site-name a 		{ color: #fff; text-decoration: none; }
#header .site-name a:hover 	{ color: #eee; }

и заменяем на

/* Шапка сайта
---------------------------------------------------- */
#header .site-name 			{ 
							  font-size: 25px; 
							  line-height: 1em; 
							  float: left; 
							  padding-top: 0px; 
							  margin-right: 18px; 
							  margin-left: 0px; 
							  }
#header .site-name a 		{ 
							  background-image: url(../images/Вашлоготип.png); width: 203px; height: 51px;
							  background-repeat:no-repeat;
							  float: left; 
							  padding-top: 0px; 
							  margin-right: 18px; 
							  margin-left: 0px; 
							  }
							  
#header .site-name a:hover 	{ background-image: url(../images/Вашлоготип2.png); width: 203px; height: 51px;
							  background-repeat:no-repeat;
							  font-size: 25px; 
							  line-height: 1em; 
							  float: left; 
							  padding-top: 0px; 
							  margin-right: 18px; 
							  margin-left: 0px; 
color: #eee; }
#header .site-name a:active 	{ background-image: url(../images/Вашлоготип3.png); width: 197px; height: 49px;
							  background-repeat:no-repeat;
							  font-size: 25px; 
							  line-height: 1em; 
							  float: left; 
							  padding-top: 0px; 
							  margin-right: 20px; 
							  margin-left: 4px; 
							  margin-top: 1px;
color: #eee; }

Теперь отвечаю на вопросы что к чему:

• Почему height: 51px;? — потому что ширина шапки 51 пиксель, и верстка не поплывет
• Почему размеры файлов разные? — потому что поймете на демо примере(2 одинаковых статичные и один чуть меньше, как бы динамичный)

Выравнивание происходит при помощи margin
Далее идем чистить кеш и пробуем обновить страницу =)

Как это выглядит смотрим на живом примере