Capturing the Elusive Favicon

It seems that more web designers than not have given up on trying to make the favicon work for them.  After more attempts than I can count, I have finally found the correct process and code to ensure that my favicon will appear consistently across browsers, and will not disappear intermittently from Internet Explorer.

Following is a quick tutorial that will simplify using a favicon on your sites.

1. Create the image you want to use for your favicon.  This should be a square image that is larger than 16px square and can be a jpg, gif, png or bmp.

2. Use a favicon generator like this one offered at to convert your favicon into the favicon.ico format you will need.

3. Insert the following code into the head area of your html.

<link rel=”icon” type=”image/gif” href=”/yourdir/filename.gif” /> <!–[if IE]> <link

rel=”shortcut icon” href=”/favicon.ico” type=”image/” /> <![endif]–>

4. Replace /yourdir/filename.gif with the location of your original favicon (before conversion).

5. Save the favicon.ico that was created in the favicon generator to your root directory.  This is very important; If it is not placed in the root directory, it will not work in all browsers.

And that is all there is to it.  Good luck with your favicon.


The following two tabs change content below.
Jennifer is a Graphic Designer in Carson City, Nevada.

About Jennifer Smith

Jennifer is a Graphic Designer in Carson City, Nevada.
This entry was posted in Tutorials. Bookmark the permalink.

One Response to Capturing the Elusive Favicon

  1. Adalina says:

    oh la la! thanks for the post!

Comments are closed.