Favicons to your site!

ganeshn11 · #1 (**permalink**) 01-25-2007, 06:13 PM

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.

HTML Code:

<html>
<head>
<title>Our Title</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>

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.