Moving at the Speed of Creativity - Custom webpage icons

Custom webpage icons – favicon.ico

Published by Wesley Fryer in edtech on August 22nd, 2005

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

I have wondered for some time how many professional websites (like CNN) and more polished looking blog sites (like lessig.org) display a custom icon in the browser address bar next to their website address. Tonight, I have solved this mystery!

The solution is 2 part:
1- Create a custom 16 x 16 pixel image and save it as “favicon.ico” in Windows icon format at the root level of your website.
2- Insert the following line of HTML code inside the header section of each webpage (in code view) that you want to display the icon:

I found the www.favicon.com site and this page from Microsoft to be helpful in solving this mystery. Since I am working currently on a Macintosh, the shareware program Graphicconverter worked superbly to resize an existing graphic I had and save it in ICO format, which is not natively supported by PhotoShop.

To get the custom icon to display in my Safari browser, I had to go to the Users – my user – Library – Safari – Icons folder and delete all existing/cached icons, and then restart Safari to get the new icon to show up when I view my webpages.

As my friend and co-worker Pavan would say, “cool deal!”