Add a Favicon to Your Website

The PEO Labs series brings you information or advice on items that are geared towards users who can take high-level concepts or sample code and run with them. Please note that many of the things discussed are not supported. That doesn’t mean that an item is a warranty-voider, it just means that the Support Analysts can’t walk you through it or troubleshoot it if it breaks.

For those who are not familiar, a favicon is the icon that shows up in your bookmarks toolbar for a saved site, and in the address bar/tab header of your web browser when visiting a site. It’s a 16×16 icon that you can use as another way to reinforce your organization’s “brand” on the web.

For those of you know know all about these, I’m sure your question is, “when do we get this functionality in Patron Edge Online?” You can actually do it right now. I have found some great resources online that will allow you to add a favicon onto your current PEO site regardless of version. Here’s the scoop:

Create a favicon for your site

If you don’t already have a favicon, you need to create an ICO image file that is at least 16×16 pixels. Your marketing folks should be able to handle something like this pretty easily, or you can use some free tools on the web. Here are a couple of sites that can do this for you:

• http://www.graphicsguru.com/favicon.php
• http://www.rw-designer.com/online_icon_maker.php

Add files to to your web server

There are three files that you need in order to make this work:

• The image file itself. I recommend placing it in the public\Images folder of your website
• This ZIP file. It contains an HTML page and a JavaScript library (and a screenshot for later). Place the HTML and JS files in your public\bbCustomizations folder. If you are interested in the technical bits of the JS library, there is a link to the author’s website in its comments.

Modify favicon.htm to point to your icon

Edit favicon.htm in Notepad or your favorite HTML editor. If your custom piece folder is not called bbCustomizations, you will need to edit the first line accordingly so that the page can find the JavaScript library. Now edit the sixth line and replace the URL here with the location of your favicon file.

Add a reference to the file on your Admin Site

In Site Design, edit each of the Templates of the Interface you are using and create a new screen part for them. See the screenshot from the above ZIP file if you need an example screen part to help you. Since this is a script, no text will be visible on the page itself, so the dimensions of the screen part don’t matter at all.

Do you use favicons on your main or ticketing websites? How has it reinforced your organization’s image? Leave a note in the comments!