Sunday, May 6, 2007

Creating and Putting Favicon.ico in your Website Address

Making your Icon - You have 2 options when drawing your icon. Either draw it in your normal image editor and then import it into an icon editor and save it as an icon; or you can create it from scratch in the icon editor. 16 pixels squared is a small area, so be sure to use the full space as efficiently as possible. Our favicon looks like this: . Would you remember that as being HTMLSource's icon?

The icon is also limited to a palette of 16 colours, all of which are web-safe. Take a look at the table on the right, that's what you have to work with. By design it can contain more, but to be safe stick with these.

You can add in bigger icons that will be used if a reader places a link to your site on their desktop, but just make sure that your 16x16 icon is the first in the file. Once you have your icons drawn, make sure you save the file as favicon.ico (lowercase).


Placing your Favicon - If you have your own domain name, www.myname.com, just put the favicon in the root directory of your site. That means the lowest level, not in any folder, in the same place as your homepage. Internet Explorer looks in that location by default, so no extra code is needed. If you have your site hosted by another company in one of their subdomains, like www.tripod.com/mysite, you should put it in your root directory anyway, but oftentimes that isn't enough. You need to add a line to your section on every page that might be bookmarked. It goes a little something like this:



That's the code I use to link to my favicon. The entire URL is not necessary, but it is foolproof in case something messes up. Using this code enables you to call the icon something other than favicon, although I really can't see a need to do that.



Click Here to Check Out My Reference Site

No comments: