homepage Welcome to WebmasterWorld Guest from 54.211.201.65
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Favicon won't show in IE
internetheaven




msg:3654268
 7:51 am on May 20, 2008 (gmt 0)

No matter what I try I can't get my favicon to show in IE. It shows fine in Firefox. I've tried different header coding, file paths and different file types e.g.:

<link rel="icon" type="image/png" href="http://www.example.co.uk/images/favicon.png">

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

I'm using the exact same coding and image types I see on all the sites I visit and their favicons show up just fine!

Any help would be appreciated.
Thanks
Mike

 

lavazza




msg:3654275
 8:30 am on May 20, 2008 (gmt 0)

try using an icon (.ico)

<linkrel="icon"media="all" type="image/x-icon" href="http://www.example.com/images/favicon.ico"> <!-- ico NOT png -->
<linkrel="shortcut icon"media="all" type="image/x-icon" href="http://www.example.com/images/favicon.ico">

poppyrich




msg:3654526
 2:16 pm on May 20, 2008 (gmt 0)

The favicon has to be in the root of the site, not in a subdirectory as in: "/yyxx.ico". Or "http://www.examplex.net/yyxx.ico".

It has to be a true .ico file. Not a png or gif renamed.

internetheaven




msg:3654561
 3:12 pm on May 20, 2008 (gmt 0)

try using an icon (.ico)

I did, I clearly showed that in my first message.

The favicon has to be in the root of the site

I tried that too, again, see original message.

It has to be a true .ico file. Not a png or gif renamed.

I used an online png->ico convertor. How do I know if it has done the job right?

jdMorgan




msg:3654566
 3:21 pm on May 20, 2008 (gmt 0)

If this is IE6, favicon handling is very buggy, and favicons are only loaded when the site is first bookmarked.

If the IE6 cache (Temporary Internet Files) is cleared or the cache entry is overwritten with something newer, the favicon goes away and won't come back until the site is bookmarked again (!).

In order to get IE6 to re-load the favicon, grab the generic icon preceding the URL in the browser address bar, and drag it to the end of the URL and drop it. You may have repeat this a few times to get it to work.

Don't ask me to explain, I don't know what they were thinking... The above is the only work-around I know of, and is obviously no good to try to explain it to your visitors -- Just be glad for IE7.

Jim

Trace




msg:3655220
 12:46 pm on May 21, 2008 (gmt 0)

I used an online png->ico convertor. How do I know if it has done the job right?
An easy way to test that is download a real ico file (must be 16x16) and try that one. If it works, then there's something wrong with yours.
pageoneresults




msg:3655226
 12:53 pm on May 21, 2008 (gmt 0)

Stop all those favicon 404s!
[webmasterworld.com...]

On quick glance, try reversing the order of the elements, I believe that will do the trick. And, try this code instead...

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

No matter what I try I can't get my favicon to show in IE. It shows fine in Firefox.

Firefox is reading the rel="icon" element. Depending on the order of the elements determines how they display. The rel="shortcut icon" must be first in the order for IE to display the favicon.

Also, to force a new favicon after experimenting with a previous one, just rename it to favicon1.ico and favicon1.gif That forces IE to update as it will no longer reference the one buried deep in its damn cache somewhere. Its a pain in the arse but it works. I have some favicons with a 6 or 7 number. ;)

The favicon has to be in the root of the site.

Ah, not anymore. I thought that too and after being up to my neck in favicon development, you can put them wherever you want. They say it is good practice to have a favicon at the root just in case for some of those really old UAs. ;)

Also, to force a new favicon after experimenting with a previous one...

Just a note about this one, as soon as someone visits a site with a favicon, IE loads that image deep, deep, deep within its cache. So deep, that it isn't worth the time to chase em' around. After doing all of my research I found one line of instruction that cleared all that up. Just rename the new favicon to force IE to load a new one. I've found that adding a numeric suffix helps me keep track of how many times it was revised. ;)

Another quick note, you can literally have a favicon for each and every page of your site. Create an entire library of them all color coded and watch what fun you can have with IE7 and Firefox Tabs. :)

An easy way to test that is download a real ico file (must be 16x16)

Ah, I thought that too! The recommended size is 32x32. It will display just fine at 16x16 and perfect when someone drags to their desktop which is a 32x32 icon in most instances.

jdMorgan




msg:3655305
 2:17 pm on May 21, 2008 (gmt 0)

Complete .ico files can contain multiple-size icon images, each for use in a particular application. Look for icon generator programs that support the multi-size format. This allows you to "tweak" the image for optimal display at 16x16, 32x32, and 48x48 sizes for use in the browser address bar, desktop using "small" icons, and desktop using "large" icons, respectively. As with photos, start with the largest format and reduce from there, tweaking if needed.

Jim

internetheaven




msg:3655643
 6:56 pm on May 21, 2008 (gmt 0)

The rel="shortcut icon" must be first in the order for IE to display the favicon.

and

Also, to force a new favicon after experimenting with a previous one, just rename it to favicon1.ico

together worked, thanks. But only for the main page. The same coding on inner pages does not show a favicon in the browser bar or if you save to favourites (IE7).

poppyrich




msg:3655897
 11:46 pm on May 21, 2008 (gmt 0)

There is an article on MSDN called:
"How to Add a Shorcut Icon to a Web Page"

Direct from the horse's mouth. (Leave it alone, please.)

that's where I got my info when I, too, had problems getting an ico to show up consistently in IE.

penders




msg:3656236
 11:13 am on May 22, 2008 (gmt 0)

Just thought it was worth reiterating jdMorgan's comment above:
In order to get IE6 to re-load the favicon, grab the generic icon preceding the URL in the browser address bar, and drag it to the end of the URL and drop it. You may have repeat this a few times to get it to work.

This nearly always does it for me, you often only have to drag the icon a few pixels. Doesn't help your end users much though.

internetheaven




msg:3657154
 8:14 am on May 23, 2008 (gmt 0)

There is an article on MSDN called:
"How to Add a Shorcut Icon to a Web Page"

Hmmm, they say to use:

<link rel="SHORTCUT ICON" href="http://www.mydomain.com/myicon.ico"/>

which works without having to save to favourites.

Thanks!

pageoneresults




msg:3657176
 8:55 am on May 23, 2008 (gmt 0)

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

You can use both if the "shortcut icon" comes first for IE.

In the topic I referenced above, there is a reason why the two are recommended. One for IE, one for all the others. What's neat about the second version for all the others is that it can be animated! Firefox supports .gif for favicon, IE does not.

poppyrich




msg:3658197
 4:33 pm on May 24, 2008 (gmt 0)

One last caveat having recently researched this icon thing myself:

Ico files can contain multiple images of different sizes - 16x16, 32x32, and (esp for Vista) 48x48. (Also, different color palette ranges, as well.)
If your icon file has only 16x16 within it (which, on the icon-maker site I used was all I got) when the icon is saved to the windows desktop or anywhere else that calls for 32px or 48px it stretches the 16px image which looks really bad, as you can imagine.

If you want your favicon to be as professional-looking as it can be in all situations, be aware of this. Its a project.

I played around with icon creation quite a bit many years ago - it's a craft in its own right. Each and every pixel counts for a great deal, very frustrating, especially for those like me who are untrained (and untalented) at design.

internetheaven




msg:3679368
 9:39 am on Jun 20, 2008 (gmt 0)

Just looked at Google's page code, they don't have any favicon coding in the header at all that I can see. So why does their favicon show up for every page no problem?

penders




msg:3679408
 11:01 am on Jun 20, 2008 (gmt 0)

So why does their favicon show up for every page no problem?

Because browsers generally request favicon.ico from the webroot by default (if it's not already in the browser cache) - without having any specific code in your page. Not sure if all browsers do this however. Without having a favicon.ico file in your webroot and without any code in your page, you will often find a lot of "404-File does not exist" errors in your server error log, requesting favicon.ico from the webroot. (As pageoneresults suggests above)

You must use the above code in your page if favicon.ico is called something else or is in a different location (perhaps you have different favicon's for different pages), or possibly a different type (as opposed to a true .ico file). May be for greater browser compatibility...? And may be if you want to change your favicon and force the clients browser to update... may be...?

internetheaven




msg:3679806
 8:22 pm on Jun 20, 2008 (gmt 0)

penders - as per the above thread. My problem was that my IE was NOT showing my favicon unless I put in specific coding. My IE is showing Google's favicon just fine without that specific coding. I'm curious as to the difference.

penders




msg:3680158
 11:50 am on Jun 21, 2008 (gmt 0)

My problem was that my IE was NOT showing my favicon unless I put in specific coding. My IE is showing Google's favicon just fine without that specific coding. I'm curious as to the difference.

IE6?

Well, my IE6 does not show Google's favicon! However, if I add Google to my favorites or drag the little favicon (plain page icon) a pixel or two, then it seems to request it, gets stored in the browser cache and from then on it stays... until I delete my cache again. It seems to need some encouragement!

I'm guessing you have managed to somehow get Google's favicon into your browser cache?

From a little test I did earlier (without any specific code in the page), IE6 did not request the favicon.ico file from the webroot unless it was 'encouraged' by using one of the methods just mentioned.

BUT, even with the above code in the page with the LINK tags either way round and using true .ico files the favicon DID NOT show in IE6 unless I 'encouraged' it, as mentioned! In fact simply surfing to sites that should have favicons do not show in my IE6 (standard IE6 on WinXP - 2 different machines) - unless I 'encourage' them (this is regardless of whether the code is in the page or not). So, from my experience, it is simply not possible to force the favicon to show in IE6 when the user simply surfs to the page!? May be certain machines/IE6 versions vary?

IE7, however, works fine. Favicons appear in Google and any site I visit that should have a favicon, with or without specific code in the page.

bridger




msg:3689011
 12:43 am on Jul 3, 2008 (gmt 0)

Well after putting some things together that I read here I finally got the favicon to show in IE7 (and FF for that matter)

I just put the favicon ICO image in the home directory AND enter a complete URL including "WWW" in the "Link Rel" statement.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved