I decided that I wanted to add a little more polish to my blog by adding a web site logo. I did a quick google search and found a reference for doing this here. Below are the steps I took and the issues I encountered.
- I searched the internet for a 16 x 16 Icon (.ico file) that I wanted to use. In my case I found some interesting free icons at http://dryicons.com/free-icons, but there are many other sites you could use.
- Since the icons provided were .png files I needed a utility to convert the one I chose to a .ico file. I used the free online converter at Convertico.com to accomplish this.
- I renamed the file favicon.ico and copied it into the root folder of my web site, in my case http://www.legendrefamily.org/.
- I started up Google Chrome and navigated to the page I had created. On the current tab in place of the standard blank page Icon that Chrome nomrally uses was the Icon I had chosen for my site.
It was as simple as that. I did experiment more with the icon and found some unusual behavior. I noticed that it did not appear when I viewed the site using IE7 and did appear in Google Chrome. I also noticed that when I deleted the favicon.ico file Google Chrome continued to display the Icon on the tab containing my web site. Then I tried putting a new favicon.ico file with a different image and the tab image did not change. I tried opening and closing the browsers and restarting the web server and neither of these fixed the issue. It was only after an hour or so of not using the browser that the Icon changed.
I did some additional research and found that my issues were not uncommon. Follow the link here and look in the Troubleshooting section of this page if you want to find out more. After reviewing this I plan to use the code below as an alternate method of displaying an Icon on my site on a page by page basis and see how that works.
<link rel="shortcut icon" href="favicon.ico">
