A picture speaks a thousand words – Or at least that’s what people say. And you will have seen lots of websites, that after you’ve opened them, display a little tiny picture towards the left of the website address in most popular internet browsers in use today. And if you run your own site, you may have wondered, how do I get one of those?
Well wonder no more – The picture is called a “Favicon”. And you get one by creating an icon (.ico file) based on an image you design, and putting it in the root directory of your site. So that’s it in a nutshell. Below I’ll go through it step by step.
1. The image
Choose an image or create one from scratch which will look good even when displayed extremely small. If you’re creating this image from scratch, it helps to work on a small scale so you need not resize too much in order to use the icon. Make a new image sized 64×64 pixels. Once it is done, resize to 16×16 pixels and see if you like the look of it.
For this example, I have taken part of a photograph of sunflowers, and selected a square of the original to create this small picture: (64x64pixels)
Resized to 16×16 to see if it looks acceptable:
Well it ain’t perfect, but it’ll do for my example.
Next – we need this image to be saved as an .ico file (Windows Icon File). Depending on what software you have access to, you may be able to do it from your graphics program directly (For this example I used The Gimp, which can directly save as .ico, if you’re using Photoshop, you may need to install a plug in). OR: You can simply convert your .png file to .ico using 
This Very Handy Website. Then rename your file to “favicon.ico”.
2. Your Website
Now that we’ve got the icon, we need to include it in our website. In order to do this, upload it to the root directory of your website. Now most browsers will automatically recognise it. But in order to make sure, include the following code on all pages, within the <HEAD> and </HEAD> tags towards the top of the page:
<link rel=”shortcut icon” href=”http://www.mysite.com/favicon.ico” type=”image/vnd.microsoft.icon”>
<link rel=”icon” href=”http://www.mysite.com/favicon.ico” type=”image/vnd.microsoft.icon”>
And done! Now everyone who visits your site (provided their browser supports it) will see your favicon next to the url, next to the title of each page in tabbed browsers (IE7, Firefox, Google Chrome, etc), as well as next to bookmarks.
NOTE (Thank you Odzer for reminding me) : if you’ve done all the above and your favicon is not showing up, empty your cache (temporary internet files), or the change won’t show up. This is because your browser is basically still looking at the files it had previously saved on your hard drive, not the ones you just updated.
Just life - according to Hedonist... 
web designer Said:
on March 13, 2009 at 7:29 pm
Nice bit of information here. So many times I get my buddies asking ” How did you get that icon in the browser” Thanks to you I can now just link them over to here!
Thanks!
odzer Said:
on March 13, 2009 at 8:48 pm
@ Hedonist : Thank you Thank you Thank you! Now I have a little picture of my own! One bit of advice for Safari users if it does not show up even after you have added the favicon be sure to empty the cache and reload.
hedonist666 Said:
on March 13, 2009 at 11:03 pm
@web designer: Well that’s exactly why I put it up.. only yesterday did I get asked the same thing.
@odzer: Oh yes, emptying the cache is a must for pretty much all browsers.
rockerthorn Said:
on July 28, 2009 at 4:06 pm
this was very good advice it works realy good but on 1 website it shows another website s little picture how do you change it back
hedonist666 Said:
on July 29, 2009 at 7:21 am
Hey rockerthorn, if you’ve accidently put the wrong url in the code, just change it to what it should be and empty your browser cache. That should take care of it.
If you wanna get rid of it alltogether, you just delete the code, and the favicon file and it’s gone. Though you need to empty your browser cache, because that has saved all the information from how it previously was and will keep showing you the old picture until you reset it.
Hope this helps…
Farnoosh Said:
on August 6, 2009 at 2:36 am
I am afraid the instructions did not work for me. I was able to get my .ico file created but I use Thesis Theme. I put it in my root directory, which for me is http://www.prolificliving.com/blog but I also tried my main theme folder. I haven’t done anything to the php code yet though.
Tried various browsers.
Any thoughts much appreciated.
Do I need to keep the name favicon.ico or can I change it to any-name.ico?
Thanks,
Farnoosh
Farnoosh Brock Said:
on August 6, 2009 at 3:27 am
Got it working but took a lot of tweaking……….
Ended up removing the line from the header.php after all.
Thanks much!
hedonist666 Said:
on August 6, 2009 at 7:28 am
Hi Farnoosh,
Glad to know it worked in the end. The instructions I posted are easiest to follow when you’re dealing with a plain vanilla static website (no php files). The more additional functionality is added to it the harder it may be to find your way around the files to figure out where exactly you need to put the favicon code. And I would recommend keeping the name “favicon.ico” because some browsers then automatically recognise it even if you don’t put the code in your website header…
Farnoosh Brock Said:
on August 6, 2009 at 10:19 am
Thanks. Yes renaming it to original also helped. It was a fun exercise. Now I need to create a really professional logo at some point………thanks again! 🙂
Bryan- Logo Design Said:
on December 17, 2009 at 1:31 pm
wonderful, i like your advice, whole post is really very good.
Lancashire Web development Said:
on November 2, 2012 at 7:37 am
Well, this is interesting. Great to find out this website. I have really got the stuff here very interesting and informative. Your website is cool enough.
Zavtech Said:
on March 16, 2013 at 5:40 pm
Great, useful post!
Jack Said:
on July 6, 2013 at 6:02 am
Doesn’t seem to work for my website, not sure why, but will keep trying!
Jack Said:
on July 6, 2013 at 6:05 am
is the “”” important? I’ve tried putting it in as well but not going so well… still only gott he little globe shape next to it in my firefox browser.
Jack Said:
on July 6, 2013 at 6:06 am
& #8221;
was supposed to go in the “”s there