How To Make Favicons For Your Site

By Author: Daniel O'Connor
Total Articles: 14
Comment this article

What's a favicon?

It's the thing you see in the address window of your browser. Every company that wants to have a credible web presence has one.
Google's favicon looks like a lower-case, blue "g" now; it used to be an upper-case, multicoloured "G". It was
a big branding change for them, so they thought long and hard before altering it.

Why should you have one? Here are some pretty good reasons for you to consider:

- They add to your company branding
- They make your company look with-it, website-wise
- You get to choose how your website is shown and don't just settle for the Internet Explorer or Firefox default favicons
- It's easier to pick out graphical images than text, so they stand out from other sites in your browser's Favourites lists
- You can even have favicons that rotate graphic images with text

I can't recommend them highly enough. This is how you make them.

The Quite Easy Way:

1. Make the graphic image you want to use for your favicon. Got to be small, though! 32x32 or 16x16 pixels.
2. Save the image as a bitmap, for example ...
... favicon.bmp.
3. Use a graphics editing program to change the bitmap file to an icon file.
4. Don't have any graphics software? Download a free one -- Irfanview, for example. Google the name for the link.
5. Change the file you made. Its name should go from favicon.bmp to favicon.ico.
6. Upload the new icon file to your website, along with the following HTML code, which you should
put in the "Head" section of your page (don't forget to enclose the code with brackets):

link rel=shortcut icon href=http://-your website's homepage URL here-/favicon.ico

And hey presto!

The Even Easier Way

1. Go to the "Favicon From Pics" site (Google the name). I'm not affiliated with them in any
way, so use the site with confidence.
2. Select the graphic image you want to use for your favicon (don't worry, it doesn't have to be an icon file,
it can be a gif, jpeg, png, whatever. It can even be a picture of you).
3. Type in the text you want, if you're using scrolling text along with your favicon, and tick the Animate
Favicon box.
4. Click Generate FavIcon.ico and save the file it comes up with.
5. You'll get a favicon file, along with a file called animated_favicon1.gif. Don't worry; it's all completely free.
6. Upload the favicon file to your website, along with the HTML code given below (don't forget to enclose the
code with brackets):

link rel=shortcut icon href=http://-your website's homepage URL here-/favicon.ico

7. If you're having an animated favicon with scrolling text, upload animated_favicon1.gif to your site and put
this HTML code directly underneath the code given above (don't forget to enclose the code with brackets):

link rel=icon href=animated_favicon1.gif type=image/gif

And that's it! Check it out. See how it looks. Don't you feel all warm and fuzzy about your site now?