What is a Favicon?
Favicon’s are small images displayed to the left of the URL in your web browser. The main purpose of a favicon is for the small image to show in your bookmarks bar when someone bookmarks your site that way it stands out in your bookmarks. Favicons also show up in browsers that support tabbed browsing (Most modern browsers), to help you greater distinguish between each tab.
The First Implementation of Favicons
The first implementation of favicons was in Internet Explorer 4, and it required you to upload the file favicon.ico to the root of your web server which would in turn load that image into the bookmark section in IE4. Once other browsers started implementing this favicons a better technique was needed. It came by way of HTML, you could now link to the favicon.ico which means you could have multiple favicons for one website or be able to place the favicon wherever you please on the server.
The Correct Way to Link a Favicon
Once the favicon evolved it became easy to link separate images to separate HTML pages. Below is how you would correctly link to a Favicon!
<link rel="shortcut icon" href="images/favicon.ico" />
25 Great Favicon Examples
- http://www.closerlook.com/
- http://sketch.odopod.com/
- http://www.imgspark.com/
- http://secondandpark.com/
- http://www.pixelgraphix.de/
- http://www.goodbytes.be/
- http://99designs.com/
- http://www.colourlovers.com/blog
- http://hootsuite.com/
- http://www.mint.com/
- http://www.blog.spoongraphics.co.uk/
- http://line25.com/
- http://csstux.com/
- http://www.bp.com/
- http://www.apple.com/
- http://www.zink.com/
- http://www.dafont.com/
- http://cardobserver.com/
- http://www.youtube.com/
- http://aurea.es/
- http://www.zoominfo.com/
- http://wakoopa.com/
- http://www.thisisgrow.com/
- http://www.zukool.com/
- http://www.porcupine.gr/
Favicon Resources
Start Creating your Favicon
Now that you have the history and knowledge of the Favicon, it is your civic duty to create one for your site. If this post inspires you to create a Favicon leave your website in your comment and I will check it out. Don’t forget to show Three Styles some love!
September 22nd, 2009 at 5:25 pm
if you use wordpress, you can find a plugin for favicons so you don’t have to mess with the theme code: http://wordpress.org/extend/plugins/shockingly-simple-favicon/
this one lets you add a customized favicon to your wordpress admin backend: http://wordpress.org/extend/plugins/admin-favicon/
September 22nd, 2009 at 6:29 pm
@mary All you have to do is add the code above to your header.php file for it to work on your wordpress blog. You may have to set the path to go inside the template directory. Thanks for the helpful plugins!
September 23rd, 2009 at 2:56 am
There is also a plug in for Photoshop that will let you create .ico files for these.
http://www.telegraphics.com.au/svn/icoformat/trunk/dist/README.html
September 25th, 2009 at 6:04 am
[...] es un modelo por la forma que se ha planteado y por su sencillez en explicar un concepto, se titula All About the Favicon – Resources / History. Inspirándome en dicho artículo (que está en inglés) trato de hacer uno propio añadiéndole [...]
September 27th, 2009 at 7:20 pm
[...] All About the Favicon – Resources / History (threestyles). Todo sobre el famoso “favicon”, su historia y algunos recursos relacionados. [...]
January 11th, 2010 at 1:55 am
[...] which is the little square (usually) 16×16 pixel icon that sits in all modern web browsers. Originally introduced as part of Internet Explorer 4 as a way to highlight bookmarks, the favicon has evolved to become the visual calling [...]