How to make a Favicon.ico and display it the browser address bar

FPRob · #1 08-16-2006, 11:33 PM

What is a Favicon.ico

A Favicon is a tiny little image that displays in your browser address bar (and everybody else will see it too) when your site loads into the browser.. Like this....

How to make a Favicon.ico

First you need to make you Icon, you can draw one for free by clicking the following link, then enter your email address and it will be sent to you. http://www.favicon.co.uk/

How to display a Favicon.ico

First, copy the file that has been sent you (called favicon.ico) into exactly the same place as your index.html page.

Then, edit the HTML on your index.html page and the HEAD of the page. The HEAD of the page is located at the top. It starts with this.....

Code:

<head>

and it ends with this

Code:

</head>

When you have located that part of the page enter the following line of code, it must be located in the HEAD of the page.

Code:

<LINK REL="SHORTCUT ICON" HREF="http://www.yourwebsiteaddress.com/favicon.ico">

You are almost done. Publish the index page AND the favicon.ico file and hey presto, a neat little address bar for your site.

Please note:

Internet Explorer is not good at displaying favicons. The is just a Microsoft thing that cannot be avoided although it will display when it feels like it. All other browsers will work perfectly.

beegud2 · #2 08-16-2006, 11:36 PM

Huh...you learn something new everyday...very cool...nicely done...(especially on so little sleep).

Good going mate.

FPRob · #3 08-16-2006, 11:47 PM

<takes a bow> <still hasnt been to sleep and for some reason doesnt feel tired anymore either> LOL

beegud2 · #4 08-17-2006, 12:16 AM

Quote:

Originally Posted by FPRob

<takes a bow> <still hasnt been to sleep and for some reason doesnt feel tired anymore either> LOL

Yo man .. the crash is going to hit you hard...lol...hope you are near a bed and away from heavy machinery...been there, done that ...lol

pemdas21 · #5 08-17-2006, 05:29 PM

Hey, I use a favicon.ico! check mine out at http://www.electronics4dummies.com

beegud2 · #6 08-17-2006, 05:30 PM

Quote:

Originally Posted by pemdas21

Hey, I use a favicon.ico! check mine out at http://www.electronics4dummies.com

Very nice....

FPRob · #7 08-17-2006, 05:56 PM

HI Pemdas... Good job.. Although just as a little tip for you... I couldn't tell what the favicon pip was until the larger pic loaded on your index page. Pics with a lot of detail dont come out very well as icons. you ricon does add lots of professionalism to the site but I would definitle recommend making a few more icons with varying pictures to see which one turns out at the best quality.

:)

and.. LOL, a day after writing this favicon tip I made a new site and the favicon wont work at all LOL.. Grrrrrr :)

Collectors-info · #8 08-17-2006, 06:24 PM

Quote:

Originally Posted by FPRob

<takes a bow> <still hasnt been to sleep and for some reason doesnt feel tired anymore either> LOL

Sorry Rob, Am I missing something. I can only get the MS explorer icon to show when I click on the links. The Square paper with the e symbol across it..?????? Any ideas.

Chris

FPRob · #9 08-19-2006, 05:47 PM

EDIT... SEE MY POST BELOW THIS ONE

Yes mate..The answer is that IE is a load of Junk LOL. It really is not good with Favicons although. If you added the line of code to the HEAD of your index page (from my original post). It might perform a bit better.

Also, another sly little tip that sometimes works in IE....

Try dragging the little square white page icon out of the address bar and onto the web page itself. Doing this repeatedly will sometimes force the favicon to display.

Occcasionally it might just take a day or two for the browser and server to conect in a way that we like and you may find it will appear automatically.

If you have followed all the steps in the orignal post, try adding the index page to your fravourites/bookmarks and see if the favicon appears there Chris.

Hope it works out but I guarantee you will have more success in other browsers.

FPRob · #10 08-19-2006, 05:51 PM

OH MY GOD I have made a mistake in the orginial post. Just looking back through it.......

THIS.....

Code:

<LINK REL="SHORTCUT ICON" HREF="http://www.yourwebsiteaddress.com">

SHOULD READ AS FOLLOWS (add /favicon.ico to the end of your websites address)

Code:

<LINK REL="SHORTCUT ICON" HREF="http://www.yourwebsiteaddress.com/favicon.ico">

Collectors-info · #11 08-19-2006, 08:13 PM

Cheers Rob, will give it a try.

Chris

FPRob · #12 08-20-2006, 01:36 AM

Any luck Chris? I feel like a bit of an ass for writing such an in depth tip and getting something as simple as the URL wrong at the same time but... Hopefully you got it working.

Everybody, for advice on favicons (and due to my confusing mistake above), feel free to email me and I will set everything clear.

Collectors-info · #13 08-20-2006, 09:55 AM

No problem. I have popped it in my things to do folder just for the moment, but as soon as I changed browsers all was working fine. It’s a pain when you change browsers as you can see the parts that where forgotten when testing in other browsers. You know the bits that move around the page on your site when you change browsers.

Cheers

Chris

FPRob · #14 08-20-2006, 05:08 PM

Yes that ios a common problem but a definite good reason to use different browsers as the new problems that you saw would obviously be happening for other visitors to your site. It does create extra work unfortunately but in the end you will end up with a more perfected site which means that it will be enjoyed more and more by your visitors.

:)

Collectors-info · #15 09-02-2006, 01:58 PM

Hi Rob, remembered your post & found this one on my travels.
http://tools.dynamicdrive.com/favicon/

Chris.

FPRob · #16 09-02-2006, 04:22 PM

HAHAHA well sourced Chris, I use a similar service to create favicons from photos but it was one of my little design secrets ;) I use DynamicDrive for a lot of their CSS tutorials, they have some good ideas.

Happy to share though :)

http://www.html-kit.com/favicon/

This service will also give you an animated favicon with scrolling text but, it cant actually be used as a favicon because it is a .GIF not a .ICO however, it is still useful for creating little links in forum signatures etc