JavaScript Tutorials

Welcome to Dream.In.Code
	Become an Expert! Join 307,149 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,693 people online right now. Registration is fast and FREE... Join Now! Chat LIVE With a Expert

Adding a Favorite Icon

Adding a Favorite Icon, How to Add a Favorite Icon to Your Website

Options

tim4christ
Group Icon

2 Sep, 2009 - 01:23 PM

Post #1

This is my first tutorial with DIC, so hopefully it will all work out!

Since I am a relatively new web designer I was surprised to find that there are no tutorials on the simple subject of how to make a favorite icon. Although most web designers should know how to do this, I think there are many (I was one) who do not.

Of course the first step is to create a favorite icon. For most browsers (like safari) you can just through in a jpeg of any size, and it will work. But, the ever-popular ie (internet explorer) has very strict rules for what kind of image you can use.

To make this very picky browser happy, you must convert your image to .ico and it must be 16x16. A program I have found to be helpful is Icon Editor, this program will convert any .bmp image into .ico format, it will also resize it for you.

Now that you have your icon ready, you need to use it on your webpage. You will need to upload your icon to the root directory on your server. Name the file “favicon.ico,” this will make all of the pages on your site have that icon placed next to the address bar, just like Google! Now, if you don’t want to clutter up your root directory with a favorite icon, you will need to put this code in between the <head> and </head> elements on every page on your site:

CODE

I hope that makes sense. Any comments or questions would be appreciated.