Store Decoration in OpenCart: Changing administrator favorites icon

We have changed our store front favicon. OpenCart has an user interface for changing store front favicon. But, it does not have an interface in the admin panel for changing the admin favicon.

We will change our admin favicon by modifying our code. We will use the following image as our favicon:

First, we will go to the admin/view/image and paste this image in this folder. Now, we will make a change in the header.tpl file in the admin section. For that we need to go to admin/view/template/common. And add this line after the <base> tag in the header:

<link href=”view/image/shop.png” rel=”shortcut icon” type=”image/x- icon” />

Here, the href attribute contains the location of the image. For favicon, we use shortcut icon rel attribute. So, our head tag now becomes like this:

<head>

<title><?php echo $title; ?></title>

<base href=”<?php echo $base; ?>” />

<link href=”view/image/shop.png” rel=”shortcut icon” type=”image/x- icon” />

<?php foreach ($links as $link) { ?>

<link href=”<?php echo $link[‘href’]; ?>” rel=”<?php echo

$link[‘rel’]; ?>” />

<?php } ?>

<link rel=”stylesheet” type=”text/css” href=”view/stylesheet/ stylesheet.css” />

<link rel=”stylesheet” type=”text/css” href=”view/javascript/jquery/ ui/themes/ui-lightness/ui.all.css” />

<?php foreach ($styles as $style) { ?>

<link rel=”stylesheet” type=”text/css” href=”view/stylesheet/<?php echo $style; ?>” />

<?php } ?>

<script type=”text/javascript” src=”view/javascript/jquery/jquery- 1.3.2.min.js”></script>

<script type=”text/javascript” src=”view/javascript/jquery/ui/ui.core. js”></script>

<script type=”text/javascript” src=”view/javascript/jquery/superfish/ js/superfish.js”></script>

<script type=”text/javascript” src=”view/javascript/jquery/tab.js”></ script>

<?php foreach ($scripts as $script) { ?>

<script type=”text/javascript” src=”view/javascript/<?php echo

$script; ?>”></script>

<?php } ?>

</head>

Now, we will go to the browser and reload our admin section. Then, we will see the new favicon in the admin panel.

 How it works . . .

Here, we have added a link HTML tag with the attribute rel. We set shortcut icon to define it as a favicon. Then, we set the appropriate image path.

Source: Hasan Tahsin (2011), OpenCart 1.4 Template Design Cookbook, Packt Publishing.

Leave a Reply

Your email address will not be published. Required fields are marked *