How to add a favicon to your Zen Cart store

kerrin hardy — Wed, 14 Oct 2009 00:34:33 +0000

What is a favicon?

A favicon (short for favorites icon), also known as a shortcut icon, is a graphic image (a 16×16 (can also be 32×32 or 64×64) pixel square icon) associated with a particular website or webpage. Browsers that provide favicon support typically display a page’s favicon:

in the browser’s address bar
Example - favicon in browser address bar
next to the page’s name in a list of bookmarks / favorites
Example of favicon in Bookmark/Favorite list
next to the page’s title on the tab.
Example of favicon in tabbed window

Creating a favicon

A favicon can be easily created using any graphic program that will allow saving of .ico graphic files. However, it can be a bit tricky creating a good looking image only 16 x 16 pixels, so a good option is to try an online service that will allow you to create a favicon for free. An example is Dynamic Drive’s FavIcon Generator.

Dynamic Drive's FavIcon Generator

Firstly, prepare your iamge by cropping or adding space around the image to make the image square.

Click on Browse to upload your image and the FavIcon Generator does the rest.

Try a few different images to see the results – you may wish to crop your logo image, for example, to show only a portion if your full logo does not convert well.

Installing a favicon

Once you have downloaded the generated favicon, there are a couple of methods to install your new favicon in Zen Cart.

Upload to ‘root’

Upload your new favicon in the root directory of your web site (ie public_html or httpdocs), using your FTP program. In most cases, this is all you will need to do.

Add favicon settings to Zen Cart

If, as an example, your Zen Cart store is in a subfolder of your main website and you wish to use a different favicon for your store, you can configure Zen Cart to set the favicon data for your store pages explicitly.

In your includes/languages/english/custom/meta_tags.php file, uncomment (by removing the two forward slash characters) the define statement for FAVICON as below:
```
// favicon setting
// There is usually NO need to enable this unless you wish to specify a path and/or a different filename
define('FAVICON', 'favicon.ico');
```
With that set, Zen Cart will explicitly mention the favicon settings on every page, automatically.
Using your FTP program, copy your favicon.ico file into the root directory of your Zen Cart store.

Note: Browsers, particularly Internet Explorer, can be a little ‘temperamental’ when it comes to showing your new favicon successfully each time. If you do not see your new favicon try bookmarking your store, or adding to Favorites, and clearing your browser’s cache . And then sometimes, it just seems to take a while to ‘kick in’. Be patient