]> Give your website an icon | Web Developer Reference Blog

Give your website an icon

Personalise your users experience with the use of a favicon.ico file. Web browsers check to see if you site has a Favourites Icon which allows a user to easily identify your website in their favourites list. Some browsers; most popularly Chrome, FireFox, and IE 7+; show the icon in the tabs for easy identification.

This website uses a simple 100px*100px image created in minutes in Adobe Fireworks. The icon file was generated using this Favicon Generator. Although I generated mine at 32px*32px, currently the icons are rendered at 16px*16px. For this reason your graphic needs to be extremely simple, while easily recognisable to your users.

Upload the generated file to http://www.yourdomain.com/favicon.ico and it should work out the box. If you wish to store your icon under a different file path, the XHTML code for your <head> section  is as follows:

<link rel="shortcut icon" href="http://www.yourdomain.com/path/icon.ico" />

…and in HTML:

<link rel="shortcut icon" href="http://www.yourdomain.com/path/icon.ico" ></link>

You may wish to include the shortcut icon meta data if your website audience will be using IE<6.

Tags: Basics, Beginners, Branding, favicon.ico, HTML, XHTML

5 Responses to “Give your website an icon”

  1. [...] I found a great tip for adding that little extra personal touch to your web site. Head over to Will Web Developers Tips for a great tutorial on how to add an icon to your web site using HTML and [...]

  2. Cusson63 says:

    Thank you for share very nice informations. Your website is goodI am impressed by the information that you have on this blog. It shows how well you understand this subject. Bookmarked this page, will come back for more. You, my friend, ROCK! I found just the information I already searched everywhere and just couldn’t find. What a perfect site. Like this website your website is one of my new favs.I like this website presented and it has given me some sort of commitment to succeed for some reason, so thank you

  3. Deon Acosto says:

    Great post and right to the point. I am not sure if this is in fact the best place to ask but do you people have any thoughts on where to hire some professional writers? Thanks :)

  4. Clay Mellard says:

    Nice, I’ve already bookmarked your this page…Now I don’t have sufficient time for learn but by reading beginning part I need to say…it was a positive begin .. Would like to learn additional too…Thanks for excellent put up!

  5. Brilliant – easy to follow and took me about 3 minutes from start to finish. Now I have a nice icon in browser tabs where many others still have a plain grey tab.

    Cheers for the tip and keep them coming!

Leave a Reply