Setting up favicon.ico

Favicon has become very popular in the past few years and is an important part of enhancing the branding of your website.

What is Favicon.ico?

A Favicon is the icon at the beginning of the URL bar in your browser. It is also visible in the favourites list when your site is bookmarked by a visitor (although, not all browsers support this). Favicon is an acronym for Favourites Icon

Setting up a Favicon.ico

Follow these steps to set up a Favicon.ico:

1) Create a 16 x 16 pixels image. This could be your logo reduced in size or another image that supports the branding of your site.

2) Save the image as favicon.ico

3) Using an FTP client, upload the image to the root folder of your web server (the root folder is the folder where your home page is stored).

4) This step is required in order to ensure that your favicon works in Mozilla. Add the following code to the header section in each web page:

<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon” />

If you do not want to store your favicon.ico image in your root folder, then you will need to specify its location in the code in step 4. You will need to put the folder(s) name in front of favicon.ico.
For example, if I want to store my favicon.ico image in the images folder, the code will be:

<link rel=”shortcut icon” href=”/images/favicon.ico” type=”image/x-icon” />

GIF and PNG images

Some new browsers support GIF and PNG images, but to be safe, I would suggest always saving the image as favicon.ico.

Comments

Thanks for this.. I have often wondered how to do this. Now I know!

I have often wondered about this also. Thanks!

This is great! I will try this tonight on one of my sites!

Me too was wanting to know how to do this for a while, I just never got around to it ~:)

just a note to people reading this. it might take a while until your browser catches up onto your favicon...

how do you save a .ico?

Blair Wadman's picture

In your graphics software, "Save as" and add .ico to the extension (it will probably add .gif or .jpeg by default, so change this to .ico)

thanks for your tutorial dude, you save my time...

Thank you so much! I've been looking for the method for a long time now! Thanks!

Apparently you don't need to add any html code to each page for Mozilla anymore. I just tested it and it seems to work perfectly well without the extra step. Thanks very much. Your instructions have been very helpful!

I applied in same way as you described. But my icon is not showing. Does it take some time to show up?

Blair Wadman's picture

It should be instant. Try clearing your browser cache?

Add new comment