BellaOnline Forums Computers Digital Art and Design Browser Icons

Diane,

I'm still working on our website and I was wondering if you can tell me how to place a custom icon next to the web page title when the page is displayed in the browser, and also how to place one next to the web page in the bookmark section? Is it done in HTML or JavaScript or something else? I also need to know how many pixels wide/tall the icon should be made at?

My husband hasn't had a chance to try the compression feature for the banner yet, but I'll let you know how it works when he does.

Thanks,

Hi,

First you need to make your icon in Paint Shop Pro, Photoshop (or an icon editor program). Then save it in Photoshop in bitmap format. The default size is 32x32 pixels at 256 colors.

Next you need to convert it into an icon format. I use the program by Easy Apps called Icon Easel 98. You can download a free trial at http://www.easyapps.com. Just use Edit -- Paste from File to import the image. Or you can create the icon from scratch within this program. When you save the image in this program it will be saved in the icon format (.ico).

Then upload the image to your website files on your hosting server.

Add the following code into the head section of your webpages.
link rel="shortcut icon" href="http://www.yourwebsite.com/YourIcon.ico"
Don's forget to add the left and right brackets on the sides of this code.

The icon will show when someone saves you webpage as a favorite.

Thanks, Diane will this also place an icon next to the title in the browser?

It is supposed to show up in the address bar as well as in the favorites list. When I tested it, it did show up automatically in the favorites list. However, it did not show up in the address bar. I did a little research on the web and it seams you must do the following to make your new icon show in the address bar.

Go to the webpage that has the HTML coding for the shortcut icon.
Use your mouse to click and grab the E in the internet explorer address bar. Pull the E out of place and let go. Your custom icon will appear next to your webpage url instead of the E. You might need to do this a few times before it works. Also you might have to do this for each webpage.

I assume that everyone visiting your website would have to do the same in order for the icon to appear in their address bar. So that doesn't seem to be very useful does it? <img src="/images/graemlins/frown.gif" alt="" /> I've check several resources and they all suggest the same procedure.

This would be more than you can expect from your page viewers <img src="/images/graemlins/smile.gif" alt="" /> . I'll see if I can find another reference on it, I thought you might have the answer off the top of your head.

Thanks so much for your help.

Let me know if you find the answer. I'd be interested. Thanks

Hi Diane,

Just wanted to let you know the code for the shortcut icon worked for the title bar also, at least in Netscape. It doesn't work at all in my IE but I don't have a very up to date version and no icons show there at all. The IE might also have a setting somewhere that needs to be set for that.

Anyway, I saw your article about adding icons to a website, http://www.bellaonline.com/articles/art23252.asp/zzz
and thought it was great. I just wanted to add that I've done a review of a shareware program called IconPilot, which I used for my project, and thought I might mention it as another option for your readers. Here is the link to the article:
http://www.bellaonline.com/articles/art21244.asp

Thanks again Diane, for all your help.

Hi Ann,

Thanks for the compliment on the article. I realy liked your review of IconPilot. Would it be OK with you if I linked to your article from mine? <img src="/images/graemlins/laugh.gif" alt="" />

Sure, I'll also link to your articles.

I did a class on this a while back and from what I can remember IE can be very buggy with this. In my experience I had to do some jiggery pokery with it to get the favicons to show up at all and then it defaulted back to the blue E again.

I'd just leave it - more and more people are using other browsers now anyhow because of all the scares over security issues in IE and it works no problem at all in Netscape and Firefox. IE people who don't see it mostly won't even be aware that the icon is there unless they use one of the other browsers for some reason, and even fewer of those who do use the other browsers as well as IE will realise that the favicon should be showing up in all three.

I read both the articles and enjoyed them, thank you for sharing them.