Favicon–What / Why / and How

If you do not know what a favicon is , it would be hard to explain with out a picture.  The Favicon is the little icon that shows up in your browsers tab for a website.

jimiz_favicon

In this picture the favicon is highlighted, it happens to be my site’s icon.  I also have a few well known sites open;  Google, Facebook, Bing, and a site that does not have a favicon.

The Favicon Beginning

The back story behind the favicon invention, came out a few days ago on a hackernews story (http://ruthlessray.wordpress.com/2013/09/02/inventing-favicon-ico/).  It is a great little article worth reading.    He talks about how as a project manager he signed off on the creation of an icon that just needed to be added to a root folder.   Fast forward many years to a time where web browsers have tabs and having favicon on your site quickly allows people like me with many many tabs open to find what they were doing.

Today’s Favicon

From it’s invention to the use of tabs, the favicon also can cause some technical  overhead.  Mike Krieger did a great presentation at Airbnb regarding the Scaling of Instagram.  During that talk about scaling his 1 billion dollar company, he takes the time to reference the favicon.   You may think, how can a site like instagram have an in issue with a favicon.  From that article I found another great story on optimizing the favicon.    He goes on to discuss the issues instagram had with the favicon.   404 issues, performance and other challenges.    I am always amazed at some of the creativity of sites with their favicon.   At the same time, I can appreciate the developer for adding one.  Especially if you  have ever done some web troubleshooting you can see the 404 and errors shown in web tools when you don’t have a favicon.   Here is a screen shot using fiddler to show a 404 from a site with out a favicon. If you have not heard of fiddler, I plan on doing an  upcoming post to discuss the value of this great tool.   I happened to have this URL open in my above image without a favicon.  Essentially the server is throwing a 404 on all page loads because there is not a reference to a /favicon.ico

 

jimiz_favicon_404

 

I won’t go into how to make a favicon in this post, however I have blogged before about what I use.  I found another great artile to discuss the importance of the favicon from a different point of view http://www.webdesignerdepot.com/2012/11/whats-the-point-of-favicons/

 

So verify your site has a favicon and happy web developing.

Leave a Comment