How to add those graphics in the address bar [Archive]

View Full Version : How to add those graphics in the address bar

forgottenglory

01-10-2007, 11:38 AM

I have seen many websites include a small graphic next to the URL (even codingforums.com have it) in the address bar and would like to do the same on my website.

Could anybody please point me towards a tutorial on how to do that or tell me how to do it. Could you also tell me what are they called.

Many thanks

koyama

01-10-2007, 11:47 AM

yeah, that is a favicon. Can you believe it? I find some of the best information about this on Wikipedia (http://en.wikipedia.org/wiki/Favicon)

forgottenglory

01-10-2007, 12:54 PM

Thanks for the link. I read through the tuts and I've used the following code in the header of my html page:

<link rel="icon" type="image/gif" ref="favicon.gif" />

Although it displays properly in Firefox 2.0, Netscape 7.1 but doesn't display at all in Internet Explorer 7. Why is that happening and is there a way to change the code so IE displays it as well.

Thanks

koyama

01-10-2007, 01:08 PM

You'll need to create the special .ico file in order to get it working in IE6.

That means special software is needed. I remember you can download a free plugin for Photoshop to handle this format. Try to search on Google.

After creating your .ico file you can use this tag:

<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="somedir/someimage.ico" />

forgottenglory

01-10-2007, 01:43 PM

OK...I have created my 16x16 .ico file on one of those favicon generators online and modified the code as follows:

<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon.ico" />

Again this displays fine in Firefox and Netscape but doesn't appear in IE7. However, other sites who use favicons display it in IE7. Am I missing something here?

koyama

01-10-2007, 02:03 PM

...strange. I have no clue. Try to post a link. Maybe someone can see what the problem is.

forgottenglory

01-10-2007, 02:55 PM

There you go...I have created a empty HTML page with the appropriate code to display the favicon. Click HERE (http://www.forgottenglory.com/icon.html) to view it.

The favicon i've created is a simple black 16x16 for testing purposes. Let me know if you can see it in IE6 & 7. I don't have a problem with Firefox or Netscape.

Just a thought...do you think that a MIME type needs to be created on the host server for .ico files for them to display in IE?

koyama

01-10-2007, 03:12 PM

What you have is a jpeg image. It is not enough just to give it another extension. You need a true icon file. You can try to download CF's icon file and test in your own code.

http://www.codingforums.com/favicon.ico

I don't know how you created it, but apparently the application you were using just scaled your image.

forgottenglory

01-10-2007, 03:30 PM

I have substituted the black icon with that of CF's. It's the same problem. IE7 doesn't display it. Have a look HERE (http://www.forgottenglory.com/icon.html)

To my knowledge I did convert a png to ico using the following favicon generator
which you can view HERE (http://tools.dynamicdrive.com/favicon/)

and then also used another one HERE (http://www.favicongenerator.com/)

On both sites, after uploading my png I was then asked to download the corresponding ico.

W3C standards specify PNG, GIF and ICO formats for favicons. They all work fine on Firefox and Netscape. But simply refuse to appear in IE7. What I thought would be a simple affair is getting ridiculously time consuming...:confused:

mlseim

01-10-2007, 03:37 PM

In your <head> section, just put this line:
<link rel="shortcut icon" href="favicon.ico" />

The line you have now is:
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon.ico" />

Have no clue what "image/vnd.microsoft.icon" is all about.

forgottenglory

01-10-2007, 03:54 PM

Changed the code and still doesn't work in IE7. Can anybody run my page on the IE6 & & browsers to see if anything appears just in case the problem is with my browser.

The image/vnd.microsoft.icon bit used to specify the MIME type for web servers.

Here is what Wikipidia had to say:

ICO files image/vnd.microsoft.icon (Alternatively, image/x-icon can be used instead, for compatibility reasons. However, it is preferable to use the IANA-registered standard MIME type, as most major browsers now support it.)

koyama

01-10-2007, 03:55 PM

It works like a charm for me in IE7. Also works in IE6 after bookmarking as is necessary with this browser in order to see a favicon.

I believe image/vnd.microsoft.icon is the IANA approved MIME type (http://www.iana.org/assignments/media-types/image/) for an icon file.

forgottenglory

01-10-2007, 04:01 PM

Thanks...I shall go ahead with this code then. It must be a problem with my browser.

Thanks for your time and help.

frosty1433

01-10-2007, 04:15 PM

Hi,
Please try this:
Right Click on IE icon on desktop > Properties > Delete > Delete all (removes temporary internet files, cookies, history, etc.)

...Then try...

forgottenglory

01-10-2007, 05:02 PM

Tried that as well...still doesn't work. For IE7 does the graphic have to be ico or can it be png or gif for it to show?

koyama

01-10-2007, 05:55 PM

...hmmm doesn't seem to be the case. I thought so, though. But I tried in IE7 with png, gif, jpeg and nothing works.

forgottenglory

01-10-2007, 06:04 PM

I got a bit frustrated with the whole thing so I've deleted all my working files and start afresh tomorrow...just in case you click on the links I've supplied.

Why can't IE just comply with the Web Standards? It would make life easier for everybody...

frosty1433

01-11-2007, 06:50 AM

Well, it's working just fine for me on IE7.