How To - Make your own Favicon
For a long time I had been wanting to learn how to make my own favicon, but I was never able to do it. My main problem with making a favicon is I had no idea what I wanted to make was called a favicon. Even right now you are probably reading this and have no idea what a favicon is, Wikipedia has a good entry about them. To sum it up though, a favicon is the little picture that is sometimes next to a bookmarked page.
The picture to the right shows three examples of favicons; Blogger Dashboard, ODP, and whodawannahuh.
The html required for a favicon is VERY simple, it's one line. The hardest part is thinking of a good graphic for your page. To make an icon there are tons of free programs out there, just Google for an icon maker. As for myself, I used Microsoft's Visual Studio .Net. If you want an icon that will be easily handled by the majority of web browser's you're best bet is to use an image size of 16x16 pixels with 16 colors. Although, most modern browsers can handle larger sizes and more colors. A sample of my favicon as shown in Visual Studios is shown below:
Now that you've made your icon, make sure you save it as "favicon.ico", although once again most modern browser can handle different file formats. I like back compatibility though so I stick with the .ico suffix.
The last step is on the top lever of your website in the <head> section add the following html snippet , making sure to change it to reflect the location of your icon.
<link rel="shortcut icon" href="favicon.ico">
That's it! After seeing it once you realize how simple it actually is, it's surprising more people don't do it =)
I created a favicon for this site and when you bookmakr the page it shows up. It is the owner of the page in control that allows you to see it.
Posted by
Tom |
7/12/2005 11:34:00 AM