Add Favicon To Your Site - Creating, Converting to icon, Setup

Have you ever wondered how to get those icons displayed in your address bar for your own site? If you do not know what I mean, you could possibly have a browser that does not support favicon.ico or you just have not noticed.

If you visit Google they should have a favicon in their address bar, if it's not displaying just goto this place to get the idea of what it would look like, but in your address bar, it should show just before the http part but sometimes it does not show so what I want to do is show you how you can force it to be shown on browsers that support it.

The programs we will be using:

Any graphics program will do, for this I will be using MS Paint, although I recommend a program that supports transparency, or if you have MS Visual Studio you would have a program that can make the .ico file directly without using the conversion program.

I'll be using this program Right-Click Image Converter which can convert most image formats to icons, but that's not guaranteed it'll work across all browsers, so we will create a more compatible icon. So download it and install it right now. This program is a 40 file conversion evaluation program, which is ample for what we need, if you like this program you should buy it.

And an FTP Client, I'll be using FileZilla which can be found at SourceForge

So open up MS Paint, go to Image in the menu bar, Attributes. We now change the attributes to 16 x 16 Pixels using colour, that's our limited size of our icon for the address bar.

Now you need to design your picture, I'm just using this emoticon but I've resized it to 16 x 16 and it's not animated, now save it as favicon.bmp either a Monochrome bitmap, if it's black and white or 16 colour bitmap (wider compatibility) or 256 colour bitmap, which only a few browsers support. If I was you, 16 colour bitmap is the better choice but you may lose some colour from the file.

Now we browse to our directory where we saved our favicon.bmp file and right-click on it and we should see right-click image converter in the menu, move your mouse over it and then select convert to .ICO this will now convert favicon.bmp to favicon.ico in the same directory if was converted. You now have the favicon.ico file you will use on your site.

We then upload favicon.ico to our root directory on our site, public_html. So do that now.

Now that we have done this, if browsers supported favicon.ico then this would be all we needed but sometimes it doesn't display. So to display it, I'm going to edit our index page. index.html to add this line in our head section of the file.



The <link> tag is how we add it to our site, displayed in the address bar. Now open your browser, and goto that page is it showing up? If it is, we are done. If not, make sure that favicon.ico is pointed to correctly, easiest way would be to change href="favicon.ico" to href="http://yoursite.com/favicon.ico", if it's not working, it might be your browser doesn't support it. Note: IE is very buggy supporting favicons, if you bookmark a page with favicons, it should show your icon in that bookmark.

Well that's it for now.

Hope this helps.


Cheers, MC

 

 

 

Comment/Reply (w/o sign-up)

the favicon has to be 16x16, and 16 colors or b&w, or else you risk crashing internet explorer (yes i've seen it crash before just because someone made a 256color favicon.ico)

Comment/Reply (w/o sign-up)

That's quite a claim, although it could be the reason why IE is buggy in favicons, they could have dropped compatibility with it, although some people report it still works, it doesn't work in my IE version 6 other than if I bookmark a page using favicons, then it will show it.

256 colours is supported in Mozilla, and would not crash due to it. Any more reasons not to switch?

Cheers, MC

Comment/Reply (w/o sign-up)

i don't think you can add your self unless it is present in cpanel.

Comment/Reply (w/o sign-up)

I would like to add that if you're running a business site, adding a favicon will strengthen your branding effort. I've seen many of the Internet's major sites and commericlal sites having a favicon, such as BBC, CNN, and so on.

Now with this tutorial anyone can add a favicon!

Comment/Reply (w/o sign-up)

Cool! Added it for our other site.. trap17.com Just made up a plain one. Can you make some good ones...

Comment/Reply (w/o sign-up)

I've been making a few favicons, although IE only displays them as black pictures I've also created .png versions which you can figure out how to fix for your own browser to display, although these .ico files do bookmark in IE properly, displayed from browser doesn't work.

Other browsers are more advantaged by these ones. I'll be designing more and more when I can, some of them aren't that good and I've been thinking of removing them, but I thought I'd leave them up.

Not that many there yet, but expect more. You can see them and save them from here

If anyone else wants to design some and have them displayed, just ask me, I may even present the site's page better, as I only hacked up a small script to display the images out of the directory and didn't want to waste too much effort on it.

These favicons are yours to use. I also have my own site's favicons, which I would prefer to remain my own but you can use them if it's altered to not be exactly the same.


Cheers,


MC

 

 

 

Comment/Reply (w/o sign-up)

Thank you very much for showing us how to do this.
You know, I always wondered why some sites had icons, but never really looked into it. I'm going to have to tell a webmaster I know about this! Maybe he'll think I'm cool now, hahaha

{Edit: Yep, I've got other people asking me to help them out too now }

Comment/Reply (w/o sign-up)

Has Microsoft done something in Windows XP to disable favicons? I have a friend whose site doesn't display the favicon in his IE browser in XP, but it comes up fine on my IE browser in Win2k and it works in Firefox in both operating systems...

Comment/Reply (w/o sign-up)

I am wondering if MS dropped the actual check for favicons due to not all sites having them, this put unneccessary calls and left unneccessary browser logs.

I believe if you bookmark the site it'll show up in your bookmarks as well as revisiting the site from your bookmarks it'll display in the address bar.

You drag the IE picture in the address bar, to some place within the address bar and drop it, it'll reload the page with the favicon. Weird as it may seem.

MS are really starting to be disappointing, heard their latest news? Telling governments to not use Linux because they could be sued for over 228 Intellectual Property Infringement and then later to report that they never said such things. Is Linux really scaring them? Seems to be that way. Good things take time.

Cheers,


MC

Comment/Reply (w/o sign-up)