Welcome to cluckeyo.com!
navigation Home Store Recipes Tips Blog

Home | Store | Recipes | Tips | Blog

Dealing with favicon.ico

I ran into a few roadblocks when I decided to put favicons on my site. After weeding through all the information I collected, and with some trial and error, I did get my little logos up and running in Internet Explorer, Firefox, and Chrome. Here you will find instructions for how I did that.

1. First, size down your picture into a 16x16 .gif using your photo program of choice, and make it as light as you can without degrading the picture quality. I adjusted the lossy on mine. I think other formats can be used, but I used the .gif.

2. I use photoshop 5.5, which does not support the .ico format, so I downloaded a freeware program which is very clean, straightforward and easy to use. And it does what I need it to do, saves a .gif into a .ico file. Click for more info on the Greenfish Icon Editor, you can download it here . It supports several different file extentions.


Greenfish Icon Editor Pro 3.1 Download



3. Open the editor and create your .ico, but also save your .gif, you will need it.

4. Once you have your 16x16 .ico, you need to name it "favicon.ico and place it, and the 16x16 favicon.gif into the root directory of your site. Although some people say that this is all you need to do, I found that it did not really work all that well. That .ico and .gif file actually need to go into every directory of your working site. For example, besides my root directory, I also have one called "tips". It needs to go in there too, and in all other such directories that hold your pages. I understand you can name your files different names, but I did not try that.

5. Once this is done, it's time to add code to the

<head></head> section of each and every page where you want to see your logo.

6. Below you will see 3 lines of code. All 3 need to be placed as the last entry into

<head></head> section of your page. The code follows:


<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico"> <!-- old tag -->

<link rel="icon" type="image/ico" href="http://www.yoursite.com/favicon.ico"> <!-- new tag -->

<link rel="icon" type="image/gif" href="http://www.yoursite.com/favicon.gif">


The first two lines are used to support different versions of Internet Explorer browsers. The third line takes care of all other browsers.

7. You need to add all three lines of code to the

<head></head> section of all your pages, and if you have the favicon.ico and the favicon.gif in place in all directories that hold your files, then your favicons should work.

8. Finally, you need to clear your history and your temp files and add your home link to favorites in order for things to show up properly.

Firefox supports the favicons fully. You will see your little logo in the address bar and browsing history, the page tab, and in your favorites. Internet Explorer will show it everywhere except the browsing history. Chrome shows it only in the page tab and favorites. These are normal variations of the different browsers.

I hope this helps you with your favicons. It's some information that I was really glad to untangle and put to use!

Sincerely, cluckeyo



Home | Store | Recipes | Tips | Blog

copyright by cluckeyo.com