Adding a Favicon to Your Site

in Design

Favicons (short for Favorites Icon) make it possible to associate a special logo or other small graphic with a web page.  Depending on the browser, a website’s favicon is displayed next to the address bar and usually also shows up in the corner the active tab. Much like the way shortcut icons are used on the computer desktop to distinguish computer programs and files, favicons can be used to personalize or brand your web sites.

Creating your own Favicon

If you don’t already have your own favicon, you will need to create one.  For experienced users, you can create one using a decent graphic editing program of your choice, just make sure to keep it 16�16 pixels and name it properly.  For simple users, we suggesting using genfavicon or favicon.cc to make the favicon.

Uploading and applying the Favicon

  • Once the favicon is created, simply upload the favicon.ico file to the Cart Root using File Manager in Pinnacle Cart Admin (Settings -> Advanced Settings -> File Manager).
  • You will then need to create a blank html file named element-custom-head.html using an appropriate program like Notepad. Before saving the file you will want to add the following code:<link rel=”shortcut icon” href=”{$url_base}favicon.ico” />Then upload the html file it into /content/skins/_custom/skin/templates/wrappers/elements/ using the cart’s File Manager.  If this path does not exist, you will want to create it using FTP or your hosting account’s control panel.
  • Go to Marketing -> Search Engine Optimization and click the ‘Generate .htaccess file’ button.
  • Go to Design and click the ‘Cart Designer’ button.  Once the Designer is loaded simply click the ‘Exit’ button in the bottom right corner.

Refresh your page, clear your cache and cookies and notice your new favicon now shows up