Помогите вывести логотип в хедере сайта

Добрый день.
Второй день мучаюсь не могу понять как изменить логотип на сайте. Пробовала по этой инструкции http://docs.kuznica74.ru/documentation/course/course16/lesson365/ , но ничего не выходит.
Логотип изначально в шаблоне реализован с помощью включаемой области вида:

<div style="background:yellow;" class="logo_cell">
                   <div>
                       <? $logo_file = file_get_contents($_SERVER['DOCUMENT_ROOT'].SITE_DIR.'include/index_header_logo.php');?>

                       <a href="<?=SITE_DIR?>">
                           <div class="logo" <?if(trim($logo_file) !==""):?>style="background: none;"<?else:?>st yle="background: url(<?=SITE_TEMPLATE_PATH?>/css/themes/<?=$_SESSION['arr_set']['color']?>/images/logo.png) no-repeat; width:220px; height: 55px; "<?endif?>>
                               <?$APPLICATION->IncludeComponent(
   "bitrix:main.include",
   "text",
   array(
       "AREA_FILE_SHOW" => "file",
       "PATH" => SITE_DIR."/include/index_header_logo.php",
       "EDIT_TEMPLATE" => "",
       "COMPONENT_TEMPLATE" => "text"
   ),
   false
);?>
                               </div>
                           </a>
                   </div>
               </div>



А вот содержимое файла index_header_logo.php к которому обращается функция $logo_file:

<div style="background: initial !important; border: initial !important; border-radius: initial !important; border-spacing: initial !important; border-collapse: initial !important; direction: ltr !important; flex-direction: initial !important; font-weight: initial !important; height: initial !important; letter-spacing: initial !important; min-width: initial !important; max-width: initial !important; min-height: initial !important; max-height: initial !important; margin: auto !important; outline: initial !important; padding: initial !important; position: absolute; table-layout: initial !important; text-align: initial !important; text-shadow: initial !important; width: initial !important; word-break: initial !important; word-spacing: initial !important; overflow-wrap: initial !important; box-sizing: initial !important; display: initial !important; color: inherit !important; font-size: 13px !important; font-family: X-LocaleSpecific, sans-serif, Tahoma, Helvetica !important; line-height: 13px !important; vertical-align: top !important; white-space: inherit !important; left: 10px; top: 35px; opacity: 0.65;" id="s3gt_translate_tooltip_mini" class="s3gt_translate_tooltip_mini_box" is_mini="true">    <div id="s3gt_translate_tooltip_mini_logo" class="s3gt_translate_tooltip_mini" title="Translate selected text">
   </div>
   <div id="s3gt_translate_tooltip_mini_sound" class="s3gt_translate_tooltip_mini" title="Play" title_play="Play" title_stop="Stop">
   </div>
   <div id="s3gt_translate_tooltip_mini_copy" class="s3gt_translate_tooltip_mini" title="Copy text to Clipboard">
   </div>
</div>

Пробовала заместо этого кода вставлять код с тегом и путем к изображению <img src="/images/logo_preview.png" width="62" height="88">, но ничего не получается. В шапке отображается - [ /images/logo_preview.png ]

-------------------
Может кто нибудь помочь, просвятить?