From the title of this tutorial, you might be wondering what a Favicon is xD. The Brain Tree has a favicon. Favicons are the little icon that comes up to the left of the site's address in the address bar and/or when you bookmark the site. Here's an example (this is TBT's :P):
See that smiley? That's a favicon ^_^. I will show you how to make your own and put it on the web!
First of all, you have to make a favicon xD! You can make it in any program, including Paint =D. But it HAS to be
16 by 16 pixels. You might want to zoom up a bit while your making it, lol =P. When you're done, you can save it as any file, but png, gif, or jpg are recommended. Of course, instead of making a favicon
you can grab a spiffy 16 by 16 image on the web you want to use and save it into your folder, but make sure that you credit the website/person
who made the image ;).
Alright, now you are ready to upload. Wait! Don't upload it to your image host. Click here
and upload your image there so it will be converted to a .ico file. Oh, and don't choose "Animate Favicon" unless
you want your favicon to be marqueed up :P. Kay, now you can click "Generate FavIcon.ico". Hopefully it'll take
you to another page when it's uploaded and you can see a preview of it in action =). Next click "Download Favicon".
Save it into a folder of your choosing ;). It should be a zip file called something similar to
"favicon_324235_4323" xD. Now you have to extract the files. Do this by right clicking on it and clicking
"Extract Files". Click "OK". A .ico file ^_^ should have just popped up, and so should a folder called "Extra".
Ignore the "Extra" folder and just focus on the .ico file ;). Oh and it should be called "favicon.ico" if you were
wondering :p.
Now we have to upload the file on the web! Go to your web host and into the folder that your homepage is in (index.html or htm)
and then upload the .ico file there. Now go into edit mode on index.html (your homepage). Copy the following code:
...And then paste it in between <head> and </head> tags. And now your done! Just save =). To check if
it worked, load your website again. Now put it in your favorites. Open the favorites menu, check your website,
and see if your favicon is next to your site's title. Your favicon should be there =). If not, don't panic, here
are some things that may have happened:
You didn't upload your favicon in the right place
Make sure that you uploaded favicon.ico in the right folder, the one that consists of the home page of your site
(index.htm or index.html).
You didn't put the code in between the head tags
Make sure you put the code in between the head tags. This is a must ;). Don't have the head tags? Reffer to
Chapter I of Making a website in the part that says "Every webpage code starts with"...
You're using a redirection host
This is what happened to me with TBT's favicon ;). If your redirection is set to "Cloaked redirection", which
means that it will hide your original URL (eg. mysite.freehostia.com), in most cases, it will also hide the favicon. If you want to have a favicon, you'll have to turn the cloaked redirection off, but that means
it will show the original URL of your site in the address bar. You choose what you want ;). If you want to get
rid of Cloaked redirection, follow these steps:
1. Go to your redirection host's website
2. Login
3. Go to your account manager/website manager/website information
4. Set "Cloaking" Off.
Congrats! You now have a favicon =)
~Nicolette