I  act as the volunteer webmaster for the parent-teacher club for my daughter’s school and implemented a favicon for that website this weekend.  Read on for details on how I did that!

My daughter’s grade school has a parent’s club, which raises money for the school and supports the teachers with various programs.  It also had a disaster of a website, and when my wife volunteered to be the organization’s treasurer, she volunteered me to be the webmaster.  I implemented a WordPress site using the theme Arjuna X and the NEXTGen gallery add-in to provide a cutting edge site, but it nagged at me that the theme did not have support for favicons out of the box.  I decided to implement one on my own.

First, a little background from Wikepedia on favicons:

A favicon  /ˈfævɨkɒn/ (short for favorites icon), also known as a shortcut icon, Web site icon, URL icon, or bookmark icon, is a file containing one or more small icons, most commonly 16×16 pixels, associated with a particular Web site or Web page. A web designer can create such an icon and install it into a Web site (or Web page) by several means, and graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar and next to the page’s name in a list of bookmarks.  Browsers that support a tabbed document interface typically show a page’s favicon next to the page’s title on the tab, and site-specific browsers use the favicon as desktop icon.

Wikipedia tells us that IE5 was the first browser to implement favicons.  Cool!

UsingWindowsHomeServer uses a favicon that looks like this:

I was looking to replace the browser icon with an image that would tie in better to the school.  Since my daughter’s school is called The Royals and since they use a crown symbol on their website, I decided to use that graphic as the basis for a favicon.  Here is what I wanted to use:

The process is pretty simple and is laid out well in this MSDN article:

Creating and Installing a Site Icon

The easiest way to create a site icon is by using X-Icon Editor. X-Icon Editor is a free application (based on HTML5 Canvas) that allows you to create high resolution icons directly from within the browser. X-Icon Editor creates high-resolution icons in sizes that are suitable for Pinned Sites, as well as the address bar and New Tab page in Internet Explorer 9.

After you have created your icon, download it from X-Icon Editor and save it locally. To use the site icon in your website, add a link element to the head section of your webpage, like in the following example:

<link rel=”shortcut icon” href=”/favicon.ico” />

The site icon file can be located anywhere in the site directory tree.

Because site icons are used both by Internet Explorer and Windows, only the .ICO file format is supported. If you change your site icon during development, you might need to clear the browser cache or rename the file to cause Internet Explorer to refresh its copy of the site icon.

To learn more about site icons, see How to Add a Shortcut Icon to a Web Page.

Next Steps

At this point, you have create a static Jump List and high-resolution site icon. In the Prompting Users to Pin your Site task, you’ll learn how to promote the site pinning features you have implemented.

The site icon can also be used in the body of your page to prompt users to pin your site. The drag-to-pin image acts just like the site icon in the address bar or tab. For more information, see Dragging an Image to Pin the Site.

I  saved the graphic from the school website, loaded it to the X-Icon webpage, processed the image and saved it to my PC.  Voila, I had an icon file (favicon.ico) ready to load to the WordPress site!

Simply load the file to the root directory of the website that you want to use it for and tweak the head.php/header.php file as shown here:

<link rel=”shortcut icon” href=”/favicon.ico” />; update the path to read the complete path to the favicon file on your server.

WordPress should now display the icon in the address bar, in your favorites and as an icon if you pinned the site to your Windows taskbar if you are using Internet Explorer 9.

I found that I had to delete cached pages and browsing history in IE9 for the change to show up.  It showed up immediately in the Android browser on my phone, as well as in IE8 after deleting cached pages…so if it does not work, delete temporary internet files, restart the browser and try again.

So if you want to add a favicon to your WordPress installation, go ahead and get it done!  It’s a simple way to dress up your website.