How to create a favicon
Mar 8, 2006 | 
2
| How To + Tips
Want to add a little flare to your web site with one of those little icon-thingys that shows up next to the browser's address bar? That icon-thingy is called a favicon and it couldn't be simpler.
Create 100x100 pixel logo
Using your favorite graphics program, create a 100x100 pixel gif or jpeg that contains the logo you want to use as an icon.Upload your logo to a Favicon Generator
There are lots of web sites that will create the specially formatted favicon.ico file for you. Just upload your logo to one of them and they will spit out a favicon.ico file for you. (For free!)I have had good results with The Favicon Generator.
Upload favicon.ico to your web server
Take that new favicon.ico file you got from the generator and upload it to the root directory of your web site.Modify html to reference the new icon
Add the following line in your html somewhere between <head> and </head>.<head> <link rel="shortcut icon" href="http://yoursite.com/favicon.ico" type="image/x-icon" /> </head>You need to do this on every html page.
Enjoy!
Update: If you don't mind getting your hands dirty with JavaScript, take a look at this example of dynamically changing favicons.
2 comments so far
This is a very useful tip for those of us just dabbling in web stuff. From my 2 minutes of testing it looks like IE does not support favicons?
One more (little) reason to use Firefox!
It does and it doesn't. It turns out that IE only shows the favicon if you have that site bookmarked.
Firefox will always show the favicon, whether it is bookmarked or not.
(I prefer Firefox too.)