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

iGuest · September 30, 2004

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>
<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://forums.xisto.com/no_longer_exists/;, 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

daniel151405241469 · September 30, 2004

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)

iGuest · September 30, 2004

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)

<{POST_SNAPBACK}>

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

sha1405241471 · October 4, 2004

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

jcguy · October 5, 2004

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!

OpaQue · October 5, 2004

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

iGuest · November 2, 2004

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

Herbert1405241469 · November 8, 2004

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 Posted Image

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

Herbert1405241469 · November 16, 2004

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

iGuest · November 21, 2004

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

<{POST_SNAPBACK}>

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

r3d1405241470 · November 21, 2004

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.

<{POST_SNAPBACK}>

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.

Herbert1405241469 · November 21, 2004

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

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.

friso · November 24, 2004

real gr8 tutorial, but just 1 thing, MSPaint CAN do .ico filesjust do save as...filetype doesnt matter, name the file favicon.ico and it will work too!

Herbert1405241469 · November 24, 2004

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" Posted Image

iGuest · November 24, 2004

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!

<{POST_SNAPBACK}>

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

Sign In

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

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information