Favicon Tutorial
What is a favicon?
Notice the red “Y!” symbol that appears in the left-most area of the address bar in Internet Explorer graphic below. Look familiar? Yep, that’s Yahoo’s favicon. These favicons (favorites icons), sometimes called “bookmark icons,” appear after adding a website with a favicon to the favorites menu in Internet Explorer and certain other browsers.
Favicons also appear in the favorites menu after a page is added. Most anyone who’s roamed the Internet and bookmarked sites of interest has noticed favicons showing up in the favorites menu like this:
They also often appear in the Windows Start menu after installing a program as shown here:
Creating a favicon
A favicon should be 16 X 16 pixels with 16 colors and the file name should be favicon.ico. IconEdit32 is a good freeware program that allows you to create favicons as well as icons of other sizes and color depths. IrfanView is an excellent freeware image viewer that supports the icon (.ico) image format. You can use it to shrink one of your regular images to a 16 X 16 size, then decrease the colors to 16 and save as a “.ico” file. I like to use IrfanView to get an image down to specifications, then edit it with IconEdit32. Remember, if you don’t save it as “favicon.ico,” it won’t work. Also, don’t just shrink an image to icon size and rename it with a “.ico” file extension. That won’t work either because it’s not a real icon file.
Installing a favicon on your website
Simply upload the file, favicon.ico to the root web directory of your hosted website with your favorite FTP program, Microsoft FrontPage, Dreamweaver MX or whatever. Make sure your favicon file is named “favicon.ico.” When someone bookmarks your site with a browser that supports favicons, your favicon will appear. Alternatively, you can use this code between the <head></head> (x)HTML tags:
<link rel=”shortcut icon” href=”http://www.thenameofyoursitehere.com/favicon.ico” mce_href=”http://www.thenameofyoursitehere.com/favicon.ico”/>
Where can I get favicons?
You can feast upon Clickfire’s collection of over 100 quality free favicons and download them for use on your website. To find out more about favicons, visit the definitive favicon site, Favicon.com.
What good is a website without a favicon?
Absolutely worthless :)
Download Free Favicons:
Alphabet 
Flags 
Miscellaneous Favicons 
Transparent
December 5th, 2007
[...] of the best uses for IconEdit32 is in creating the so called “favicon,” which appears in the left-most area of Internet Explorer’s address bar and in the [...]
December 5th, 2007
[...] neat uses of IrfanView is its ability to handle icons (.ico). I sometimes use it to create a favicon–the funky icon that appears in the browser address bar and favorites after bookmarking some [...]
December 16th, 2007
thanks for the favicon
February 10th, 2008
[...] Well that is a Favicon. I decided I needed one. The husband doesn’t particularly like it when I decide to add things to this site that may involve me turning around and asking tons of questions while he is solving the problems of the world…a.k.a. whichever world he is playing in a computer game. [...]
February 26th, 2008
a favicon appears on my website…a red asterick/flower
i did not put it there
i did not upload it to my site
have any ideas how it got there?
i worry about security as this got there somehow and i did not put it there….any ideas?
February 26th, 2008
Sandra, it looks sort of like the Mambo flower favicon. Are you using Mambo or another content management system that might set that icon as the default?
http://help.mamboserver.com/index.php?option=com_content&task=view&id=585&Itemid=124
February 29th, 2008
I followed the format above to create a favicon but it is not showing up Internet Explorer. It is showing on Firefox. Can someone let me know the problem maybe?
February 29th, 2008
Ding Ding,
I have noticed that sometimes it takes a while after bookmarking for the favicons to show up in Internet Explorer and sometimes they don’t show up at all. I’m not sure why this happens, but I’ve heard the complaint often from others. It really should work if you drop the favicon into your root directory. I’ve been able to get it to work on my sites so far, but sometimes it takes some tweaking.
Here are a few suggestions to try:
Bookmark it on another machine or ask a friend to do it and see if it shows up.
Another method you can try is the “link rel” meta tag between the head tags of your source document. This doesn’t seem to always work, but it may be worth a try.
March 19th, 2008
how is it that some computers see the favicon and others do not? What’s different in their setups?
Cheers.
March 19th, 2008
Michael, I believe it is more related to the browser. I have noticed that IE has trouble seeing the favicon after it has been deleted from the cache.
April 9th, 2008
It is not necessary for the icon to be called favicon.ico - it can have any name as long as it has the .ico extension and is correctlly referrenced. There does sometimes seem to be a problem getting it to appear. These things work well in Firefox - superior in so many ways to Internet Explorer.
April 23rd, 2008
I’ve used this before and still use it. But it does show an odd inability to “stick”, and seems to vanish or take a while to appear in IE. I blame the lousy MS speghetti code, personally. If it doesn’t seem to work don’t sweat it, my advice. It’s just one line of code. How bad can you screw it up?
April 28th, 2008
Nice overview of favicons (and blog, for that matter). I created a simple tutorial on how to create a favicon using pages (from apple iwork suite) here: http://www.cjupin.com/2008/04/28/how-to-create-a-favicon-using-pages/
June 9th, 2008
Thanks for the tip, i have been trying to add one to my site for a while. Nice blog!
June 12th, 2008
I use Firefox. I see Favicons on some sites, your site, Yahoo, etc. They show up in my bookmarks.
I have tried to use your code in my website.
No matter what…I can’t get my icon to show up in my Firefox browser!!! Grrrr…Whazzup with this???
Please HELP!
Thanks!
~Karen
June 12th, 2008
Karenality, did you upload the file to your root directory at (www.thenameofyoursitehere).com/favicon.ico? Usually, that’s enough to do the trick with FireFox and IE.
June 25th, 2008
hi i uploaded the favicon.ico file….to root directory but still it does not work… i also added extra lines in
section still did’t work…any help
July 7th, 2008
Hello thanks for your help!! I dont know if you still update this but I’m having problems. I posted my .ico file on my hosting site in the proper directory. when i type in “www.shinemediahouse.com/favicon.ico” the ico comes up okay but it is not loading as the favicon for index.html on IE or firefox.
Can you try and see if it is working for you? I also added that code so im not sure what the problem is.
Thanks for your time!!!
July 7th, 2008
Hi Tommy, I checked your site in both IE and Firefox and I am seeing your favicon just fine. Looks like you’re okay.
July 7th, 2008
Thank you so much for checking for me in such a timely manner! Just a question though. Does it look okay or is the icon muddy looking? And why can you see it and i cant?
Thanks for your time!
July 7th, 2008
No problem, Tommy, glad to help. It looks normal to me. I’ve noticed that sometimes when I delete a site from favorites in IE that it doesn’t seem to want to come back and show up in the browser address bar again. Not sure exactly why that happens though.
July 20th, 2008
I am having troubles with IE. I have uploaded the image I want to my root web, added the code to my head but still doesn’t show up in IE. I checked my website millingtonseed.com on foxfire and the favicon is there but still will not show up on IE. Anyone have a clue as to what I need to do. I really would like to have my cute little flower show up on all the browsers. Thanks in advance. :)
July 20th, 2008
Vicki, it’s in the right location, size and format seem right. Could it be the colors? Looks like 256+.
July 26th, 2008
Thanks Emory, I changed the colors to 16 hope it works.
August 7th, 2008
Hi,
For those where the favicon doesn’t appear here;
delete your browsing history in IE and then you will see the icon!
August 8th, 2008
I am trying to make my own blog, I have a problem with favicon… it appear in firefox, but can not seen in I.E.
then I check your web, it is also the same problem, your favicon is not appeared in I.E. what’s the problem? I have followed all guidances… still have same problem.
Thanks a lot.
August 8th, 2008
Thanks John,
I can see my favicon now. :)
August 23rd, 2008
I dedicated a website on favicon, whatisafavicon.com. As we share the same interest would like you to review the site and suggest me on making it better. Thanks Ashutosh.
August 29th, 2008
Hi all. OK. I’ve generated my favicon.ico file, have uploaded it to root directory with CuteFTP and voila! Nothing! On any browser. What’s happened, any ideas. Generated the icon using a plugin for Photoshop. Think I’ve done everything correctly. Help pleeeeeeze!
August 30th, 2008
Declan - did you copy the html code? Copy paste the code below in ur page below
For example…
whatisafavicon.com/icreate.html and delete all the temp files before reloading the page.
September 1st, 2008
Ashutosh, thanks for that. It seems to work fine now in Firefox but now it’s not showing up in Safari - any ideas/suggestions?
Cheers,
Declan
September 1st, 2008
Declan, its working at my end even on Safari. Try on latest one.. Hope it will work.
September 12th, 2008
In IE7 and Opera 9.52, simply putting a favicon.ico in my site’s root directory makes that same favicon show up in the address bar, tab, and bookmark for every page on my domain, and even image files.
For the favicon to show up in Firefox2, I also need to use the code in the tag and then of course it only shows up for the page its coded into.
Given that difference, how would one achieve different favicons for different pages (I don’t like every single thing on my site having the same icon)?
For FF, I’d need to put each favicon.ico I want to use in the appropriate directory, then add the code to the head tag of each page for it. But doing that, wouldn’t that cause a conflict in IE and Opera which are automatically using the favicon.iso located in the root?
December 31st, 2008
Hey there, I uploaded a favicon.ico to my root directory. The icon shows up when using safari, but does not when using firefox1 any ideas?
December 31st, 2008
Alessandro, its usually because of the favicon specs not being exactly right (size, color, file type, etc) or due to browsing caching. Do you have a link to the favicon.ico you can post?
December 31st, 2008
Hey Emory,
the link to the favicon is cincinnatusblog.com/favicon.ico
It is 16×16… but now that u mention it, i do not think that i put it in web safe colors… I believe i brought it out as a .gif (via Photoshop basic save for web conversion).
where have i gone wrong?
December 31st, 2008
Alessandro, I believe the file format is actually jpg. The extension is .ico but it needs to be saved in the true format. You can do that with IrfanView.com free grahics viewer if needed. Make sense?
January 8th, 2009
Hey, wonderful HOWTO! I’ve immediately created an url icon for my website, something I wanted to do for a long time already. Thanks and check it out.
BTW: Mine is much nicer than the Yahoo icon! :-P
January 10th, 2009
The problem with non .ico for favicon files is that IE 6 can’t read them, and 20% of people still use IE6 (what a shame), so that people won’t be able to watch your favicon.
Current versions of browser can read the most typical image formats: png, jpeg…..
January 25th, 2009
Hi thank you for the tutorial !
January 30th, 2009
Hi. Thanks so much for this tutorial! I had a weird question. I made my favicon and posted it and it was visible a few days ago but now I can’t see it. But everyone else still can. Do you have any advice?
January 30th, 2009
Hi Sharla, that has happened to me before. I believe it occured after deleting a the favorite in IE. It seems to delete if from the cache somehow. It might come back if you bookmark it again.
February 9th, 2009
I am using PHP what coding would i need to use and where should I put it? Cheers
February 27th, 2009
I have the same question as Edward
I have had no problems with favicons on other sites I’ve worked on in html but this is my first php site..
plz help if you can
thanks
February 27th, 2009
Edward and steve, most browsers will display the favicon if you just drop it in the root directory. At least, current FF and IE are doing that for me now as I test.
March 1st, 2009
Hi
I’m having problems with my favicon showing upon interent explorer. It shows up on Fire Fox and the code you show here is the first I’ve seen that code.
So I wonder if you could look at my site and see if my tags are correct. I’ve been told they are.
OH Please I’ve been searching the net this whole week trying to get help on this problem and no has responded to me.
Hope you can help
Thanks
Michele
March 2nd, 2009
Michelle, you can post your site here and someone may be able to offer a solution. What’s the Website address?
April 7th, 2009
I have found Vicki’s question and answer mostly interesting, because I have done everything else listed on this site (and on other favicon tutorials) to find out why my favicon shows on Firefox but not on IE.
Emory Rowland answered something back to her which seemed obscure but seemed to be what was possibly wrong with mine, as I did the icon in Photoshop and saved it using the plug-in but didn’t check the 16 colours or 256 bit thing. What does that all mean?
I have done anotehr icon using the photoshop icon making thing this time (rather than just resizing) but I don’t know how I have done it wrong again, but it still won\’t show on IE and I have refreshed and taken off cache and put interrogation marks at the end of the address and allsorts…
Can someone help me, please? My site is doucepresence.co.uk
April 7th, 2009
My favicon doesn’t show on IE but does on Firefox.
Emery R said something to Vikki which was very interesting and could be the reason why my favicon doesn’t work, he 256 bit and the 16 bit which I don’t understand (even though I have the plugin on Photoshop for the Favicon)
I have added “link rel” and all sorts of things in the He had of the html.
Can someone help me, please? My site is doucepresence.co.uk
April 7th, 2009
I don’t know what I have done or not done but… it is working. For now.
April 7th, 2009
[...] image must be saved as an .ico file, though, which not every image-editing program can do. The Clickfire site has a tutorial on making favicons, including a sample of the HTML coding you need to add to [...]
April 12th, 2009
Thanks to the information on this site I finally got my first favicon :-)
greetings from Kansas!
April 17th, 2009
I can see the favicon, but I can’t see the rest of the page except the background. I put the favicon on the default page only, for now. Will putting it on all the page correct that problem?
April 17th, 2009
Problem solved!
I went through Dreamweaver to put the favicon up. It put the code in the wrong place and added an extra something where it should have been. I’m typing the code in by hand this time.
April 20th, 2009
“Also, don’t just shrink an image to icon size and rename it with a “.ico” file extension. That won’t work either because it’s not a real icon file.”
This is absolutely incorrect. Save your file as a JPG, rename as .ico, upload as favicon.ico and it will work fine. This is by far the easiest way to make a favicon.
April 29th, 2009
Easy way 2 get favicon in your page.
Page Title
May 7th, 2009
Wat does upload to root web directory of your hosted website??
May I know how to upload that??
Thanks
May 8th, 2009
leechon, it just means to place the file in your top level folder of your website like (http://www.clickfire.com)
May 10th, 2009
re: Firefox
my favicon is in the root directory and shows up fine on the home page but none of the sub pages. even tried copying the code to the sub pages but no go.
favicon shows up fine on all pages in Safari and IE (needed additional code for IE)
any ideas?
May 10th, 2009
correction: some sub-pages now seem to work, but not all.
seems unpredictable.
again, any thoughts?
:-)
May 10th, 2009
sunny, do you have an example of a URL that’s not showing the favicon?
May 11th, 2009
(http://student106.tangostudents.com/sub_pg_3.html)
now this seems to be the only one that doesn’t work.
yesterday there were 3…like a moving mystery.
May 11th, 2009
sunny, I am seeing it fine on the page you listed above in FF, IE, and Safari. Maybe it’s a caching issue.
May 12th, 2009
hmmmm…
could be.
thanks very much.
May 14th, 2009
There is a website called IconDrive.com (http://www.icondrive.com) that allows you to advertise your website with your favicon.
May 15th, 2009
Dear All,
Please help me to advise for “add favicon on my site” .I am using php script and I can not find header.php or any other HTML pages.Where do I add source code of favicon.ico?Any help please?!!!
Thanks
Genius
May 16th, 2009
Did you upload favicon.ico to the root directory?
May 21st, 2009
Hi everyone, I used Yahoo SiteBuilder to create a website for my friends company, but can not for the life of me figure out how to get a favicon going. I have the favicon and saved it .ico using Irfanview. Is anyone familiar with SiteBuilder? Can anyone help?
Thank you so much!
Julianne
June 2nd, 2009
Whats the root directory?
June 2nd, 2009
That refers to just the top level directory or yourdomainname.com.
June 19th, 2009
Thanks for the info I tried uploading a favicon on my site and it does not show on Internet Explorer. On Firefox it shows up just fine.