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

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)

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

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

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!

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

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

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 }

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...

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

it's about software patent law, and it really sux. if the gov approve it, you can't use open source program like linux, and start buying buggy appz from large soft company at high price ...

about the favicon in ie it only works in bookmarks on most ie ver.

So it's true what they say... If Linux is outlawed, only outlaws will run Linux.
That would be a major blow to the growth of technology if they passed a law like that.

real gr8 tutorial, but just 1 thing, MSPaint CAN do .ico files

just do save as...
filetype doesnt matter, name the file favicon.ico and it will work too!

For anyone tired of their ol' Windows Icons, here's a neat little program I found that will make icons.

http://www.axiomx.com/PixelToolbox/

I just take a photo I want to be an icon, resize it to 32x32, and import it into this program, and "My Computer" thus transforms into "My Laetitia Casta"

MSPaint can't do proper .ico files, it is a proper file extension and is created different to other file formats. Just because you can name a file .ico doesn't mean it's correct, however it still can work with some browsers as they can interpret most file formats as favicon, FireFox/Mozilla support favicon.png, favicon.jpg, favicon.bmp and favicon.gif and quite possibly more.

Cheers,


MC

I thought I may as well list Linux (Fedora Core 3) instructions to creating favicons.

What I will be using for this:

KIconEditor
png2ico

Now we don't have to use KIconEditor, we can use any Graphics program that can create .png file formats, I just used KIconEditor, as it was pretty basic and was suitable for this.

run kiconedit

This program is used for creating KDE Icons for the KDE Graphical User Interface (GUI), and is an excellent program to use for what we want, it can create both 16 x 16 pixel and 32 x 32 pixel file sizes as well as whatever other sizes you want to specify, but since we're creating favicons, we want to create a 16 x 16 pixel sized area for us to work with. To do this:

Click on Edit in the menu bar, click on Resize near the bottom, change both sizes to 16, e.g. 16 x 16 and now click on OK.

We now have an area to work with, it might be too small to see, so using the magnifying glass with the + (plus sign) to enlarge it to a suitable size so that you can work well with it. I decided to create a simple floppy disk, I filled all the squares black, created the metal tab with a silvery grey and added a while label, with lines, I also marked out the holes with a light colour, white will do. Pretty simple wasn't it? Check out My Favicons Area under floppy to see how it turned out.

Now all that's needed is to save the file. So click on the Save button or browse to file save, default selection should allow us to save the file format as a .png image, if not, choose PNG Image as the filter and save the file as favicon to your home directory.

Now to convert it to an icon. We can now close KIconEditor, as we are now finished with it. Open up terminal, it should automatically start you off in your home directory.

Now all we need to do is to issue a simple command:

png2ico favicon.ico --colors 16 favicon.png

After executing that command we now should have a favicon.ico file in our home directory, what is left to do is to upload it to your web server in your root directory, fill in the HTML for it and be done with it.

For more information on png2ico, just do:

man png2ico

And that will explain the major use of that program. In short terms, basically what that command did was take the name of what we wanted to call it, specify how many colors we are using, default is 256 colors but we only wanted to use 16 to be safe and more browser compatible and then we told it which file we wanted to convert, and hey presto, done.

Well that's all for now,

Any comments or questions, please feel free to ask and be sure to check out My Favicons Area .

Cheers,


MC

Its good learning about Favicon...
and i feel the icon can strenthen your bussiness attitude....

If anyone's interested, there is a very good favicon creator at DynamicDrive (it even supports transparency), and a good online Java favicon creator here.

Am using IE6 when i visit google.com i won't find those fov icons in the address bar, but when i use FireFox am able, Why not in IE6, do i need to configure, if yes hw to do it?

Hey arunkumarhg,

I'll search the MS Knowledge base and find a 'factual' reason, to me the way I see it is browser improvement, if you didn't realise this, everytime you visit a website, your browser actually looks for a favicon icon in your root directory first, this means there has to be an exhange of server and client commands so that it can be processed and sent to you, else you'd be sent a 'Does Not Exist' error (won't be visible but the web server logs do log these errors).

It's a good idea for web developers to include a favicon image, as it makes loading time quicker, if favicon.ico does not exist, it will wait for a file timeout before it continues.

As far as I know, IE may have stopped favicon being detected to improve browser performance, or they want you to see their icon all the time.

If you visit a site such as www.google.com, and in your address bar is the IE favicon, hold the shift key down, click and hold that icon with your left mouse button, and drag it over the URL and drop it (all done inside the address bar), the favicon should show now, if the site had one.

I've just updated my favicons site with a better layout, I will also fix up the present icon files to make them 100% compatible with IE so that they can be viewed without having to see black shadows, this means I will no longer be creating .png files.

cheers,


MC

yes IE doesnot support favicons. I have used favicons in my site but it doesnot display. but firefox does.
hence firefox is better in that context

I found a plug-in for adobe photoshop that works really good for making icons http://www.telegraphics.com.au/sw/

Hey Josh_Jpn,

I found that plugin a while back and it doesn't produce the icons correctly, nor can it handle transparency. Best way to create the icon, is to create a PNG graphic and convert it with png2ico which is also available for Windows. Link for png2ico can be found in the above post.

Photoshop supports PNG and so do many other graphic programs. It's probably overkill to use Photoshop for something like that though don't you think?

Cheers,


MC

thanks master computers for your help on favicons, it was an excellent article, and in only 30 mins i had mine made and on the website, although i think it needs some improving, but i will think about that.
I can add that IRFANVIEW can save .ICO files and also that this is an excellent fast viewer to have (free as well).
Now hows about an article on adding metaddata and stuff for dummies?
Chris

http://www.antiquephotographer.com/

MC, I tried your suggestion, and it did work. Unfortunately, when I clicked to go to another page on the same website, the IE favicon returned. I would have to repeat the click and drag maneuver on every webpage if I wanted to see the favicon on every webpage. Oh well, yet another reason why I'll stick with Firefox and Opera... l

Thank you man, this is great, i inmediatly going to use it in my site. It's just a little detail, but it makes you site looking much more professional.

Thanks a lot for the tutorial man, I was looking for this!

Working on a site icon right now...this is terrific

Cheers!
ignition

Thanks for the tutorial! I have always wondered how to do those icons and I never knew what they were called! I've seen those used a lot and I've always liked them. Thanks!

Thank you, it's easy and works on my machine with windows xp, but only with Mozilla Firefox not with win explorer.

thanks for that. i never really bothered with favicons on my previous sites.

its just so easy that now it is a must. i took about 10mins. get image from other part of website as to carry theme, resize, clean up, save as bmp, convert, add code.

*thanks again*

anyone know if it is possible/in the pipeline for favicons with better quality/resolution. i guess that the next IE will have 256 colour support so that will become standard.

How do you create the small icon that goes at the beggining of the web address bar? ...more

Anybody needs Animated FavIcon with your site address scrolling on that along with your logo? Check this site! Thats the site without any customization Options! But if you need to custo ...more

I am the webmaster for my School's Marching and Concert Band and I would like to change the little icon (don't know the technical term) that is next to the address bar with our mascot. What I need to know is: What the name actuall term for the picture!?!? What script or ...more