Favicon shows in Firefox but not in IE8 or Chrome

[WyattSoft]

I am making a website and I've designed a favicon.

The icon is a 16x16 8-bit .ico named favicon.ico

I've tried:
Putting the favicon.ico in the same location as index.html
Putting the favicon.ico in my C:\ directory.
<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
Deleting the IE and Chrome cache.

And they still don't show the icon...

[kpac]

Code: [Select]

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />That should work if the icon is in the same folder as the file it's supposed to appear on.

Try this instead:

Code: [Select]

<link rel="shortcut icon" type="image/x-icon" href=".../favicon.ico" />

[WyattSoft]

Code: [Select]

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />That should work if the icon is in the same folder as the file it's supposed to appear on.

Try this instead:

Code: [Select]

<link rel="shortcut icon" type="image/x-icon" href=".../favicon.ico" />

Note, still didn't work.

And I've tried using an absolute link to the icon, and still doesn't work.

In case there's something wrong with the icon itself, I've attached it to this post. (Remove the GIF extension!)

[attachment deleted by admin]

[kpac]

(Remove the GIF extension!)

That's the problem!

What did you use to create it? Paint?
Go here: http://www.favicongenerator.com/ Upload the file, and it will convert it to an .ico file. You can then download the proper file.

The problem is that you were linking to an .ico file, when in fact the icon was a .gif file.

[WyattSoft]

That's the problem!

What did you use to create it? Paint?
Go here: http://www.favicongenerator.com/ Upload the file, and it will convert it to an .ico file. You can then download the proper file.

The problem is that you were linking to an .ico file, when in fact the icon was a .gif file.

It's a valid ICO file, I just added the .GIF extension so I could upload it to the forum.

I created the icon file using IcoFX.

I tried favicongenerator but when I uploaded a 16x16 PNG file, it just returned a black image file (Not a proper icon), and with a GIF file, it returned an icon but without transparency.

[kpac]

Hmm....This is quite strange. How are you looking at the file, i.e. are you viewing it from your PC or is the site on the Web?

[WyattSoft]

The website files are currently local on my PC.

I do have a spare page on Freewebs (HTML, not one of their template pages) which I could try the favicon with.

Result:
It works, IE and Chrome probably have some sort of issue with Favicons used locally.
The icon should then work once I've uploaded my page onto the web.


Thanks for your help kpac.

[kpac]

The icon should then work once I've uploaded my page onto the web.

Yes, that's what I'm thinking too.

I use a testing server here on my own PC, but most of the time the icon doesn't show up until it's on the Web. Maybe that's the case here too.

Anyways, I'm glad to help.

[borisSDT]

I am having the exact same problem.  Works in firefox but not IE or Chrome.  I tried using the favicon generator and no change at all.  Also I stupidly overwrote my old favicon with the new one but the old one looked a lot better.  It was transparent which looks much nicer than a white background.

Can anybody tell me how to fix both of these things?

http://www.singledudetravel.com/ is my site.

[soybean]

Your favicon is supposed to be at http://www.singledudetravel.com/wp-content/themes/atahualpa/images/favicon/favicon.ico.  Right?  That's what your web page file indicates.  Yet, the URL for the favicon does not show it.  Therefore, you apparently have not uploaded your favicon to that folder on your web server.   

[borisSDT]

I was not aware of that because it was working always on Firefox and thats what I used until recently.  Doing what you suggested fixed chrome but not IE (at least not the latest version).

Does anybody know how to fix IE?

What about how to generate my favicon with a transparent background?  I know I had it before and I know others have pulled it off like zerohedge.com and elance.com for example.

Thank you.

[soybean]

If you have Photoshop, here's a reference on creating a transparent favicon: http://mintywhite.com/more/software-more/create-a-transparent-favicon-for-your-website/

I'm not sure about your issue with IE.

[borisSDT]

Great tutorial, thanks a lot.  AND doing that fixed the IE problem somehow too!  Thanks!

[soybean]

Glad to hear it's all sorted.

[Sangpuiipa]

IE does not support some .ico file. It can display windows icon file for favicon.