Determine IE10 Behavior

Question

Determine IE10 Behavior

waf opened this issue 11 years ago · comments

Right now there's a TODO in the cheatsheet to determine IE10 behavior. I was thinking we could use this enhancement as a place to post notes.

Will Fuqua · Answer 1 · Tue Sep 03 2013 01:38:42 GMT+0800 (China Standard Time)

I tested IE10 with the following code snippet:

<!DOCTYPE html>
<html>
    <head>
        <link rel="icon" sizes="16x16" href="/1.ico">
        <!--[if IE]><link rel="shortcut icon" href="/2.ico"><![endif]-->
    </head>
</html>

It did not load either of the two favicons, and instead loaded the root favicon located at /favicon.ico. After removing this root favicon, IE10 still did not load either of the specified favicons, and showed the generic browser favicon (the IE logo).

After uncommenting the rel="shortcut icon" declaration, 2.ico was displayed. So, it appears that IE10 still requires the rel="shortcut icon" declaration, but since it doesn't support conditional comments, it needs an uncommented version to work.

Maybe specifying the IE version, and then the standard version, would be the most cross-browser compatible?

    <link rel="shortcut icon" href="/path/to/favicon.ico">
    <link rel="icon" sizes="16x16 32x32" href="/path/to/favicon.ico">

Audrey M. Roy Greenfeld · Answer 2 · Tue Sep 03 2013 01:58:19 GMT+0800 (China Standard Time)

@waf Thanks for filing this and trying IE10!

I think you may be right, but I'm no expert and don't have IE10 handy at the moment. Can anyone else confirm @waf's suggestion?

Manuel GP · Answer 3 · Tue Sep 03 2013 02:46:55 GMT+0800 (China Standard Time)

@waf could you try this solution instead. <link rel="icon" href="/favicon.ico" sizes="16x16 32x32" type="image/vnd.microsoft.icon">

I saw it here

Deleted user · Answer 4 · Tue Sep 03 2013 03:12:44 GMT+0800 (China Standard Time)

You can do IE testing here: http://modern.ie
I don't have a VM handy or a subscription for it though, but someone else might.

Will Fuqua · Answer 5 · Tue Sep 03 2013 03:30:30 GMT+0800 (China Standard Time)

@xr09 I tried this:

<link rel="icon" href="/1.ico" sizes="16x16 32x32" type="image/vnd.microsoft.icon">

and it did not work. I think the solution on the page you linked is working because of the IE10 behavior of automatically looking for /favicon.ico, rather than the type="image/vnd.microsoft.icon"

Mathias Bynens · Answer 6 · Tue Sep 03 2013 13:03:48 GMT+0800 (China Standard Time)

Just don’t bother using any HTML and place the favicon in /favicon.ico. (old post but still relevant)

Audrey M. Roy Greenfeld · Answer 7 · Tue Sep 03 2013 16:41:22 GMT+0800 (China Standard Time)

Thank you everyone for this discussion, and @mathiasbynens thank you for the link to your incredible writeup. This is all really helpful.

I know the no-HTML root favicon.ico solution is simple and works everywhere, but explicitly specifying HTML has these advantages:

Allows you to have favicon.ico somewhere other than the root, which would make it easier for some people's production site setups
Explicit rather than implicit just seems a bit clearer to me

My questions:

To everyone: Is there any possible way to specify HTML explicitly and have it work in all browsers? Or is that simply impossible?
@mathiasbynens is your implicit solution the way it is because you came to the conclusion that an explicit solution was impossible? Sorry to bother you about this, just want to get into your head and understand your mental decision tree :)

Shawn Zivontsis · Answer 8 · Wed Sep 04 2013 11:45:23 GMT+0800 (China Standard Time)

Why not simply have the following?

<link rel="shortcut icon" sizes="16x16 32x32" href="/path/to/favicon.ico">

This is permitted in the spec as I discuss in #2.

Audrey M. Roy Greenfeld · Answer 9 · Wed Sep 04 2013 17:56:43 GMT+0800 (China Standard Time)

About @shawnz's suggestion, please see #2 and comment there if you have more info.

Some info about IE behavior, from @ericlaw on Twitter (former IE program manager/MVP):

IE10 doesn't support link rel=icon syntax but IE11 does. Neither version supports data: URIs as the href.
But, IE9+ will support rel=icon if you specify a type of image/x-icon. See http://blogs.msdn.com/b/ieinternals/archive/2011/02/11/ie9-release-candidate-minor-changes-list.aspx

I'm still looking for feedback about my questions above, by the way.

Mathias Bynens · Answer 10 · Wed Sep 04 2013 18:18:53 GMT+0800 (China Standard Time)

But, IE9+ will support rel=icon if you specify a type of image/x-icon. See http://blogs.msdn.com/b/ieinternals/archive/2011/02/11/ie9-release-candidate-minor-changes-list.aspx

FWIW, that was mentioned in my post too:

Update: If the Release Candidate is any indication, IE9 won’t require the shortcut link relation anymore if you specify type="image/x-icon". Needless to say, this still sucks — all the more reason to just name the icon favicon.ico and place it in the root of your domain.

The way I see it, the options for favicons are:

use /favicon.ico and don’t bother using any HTML
use HTML and deal with the cross-browser issues

Given the pros/cons for each option, I don’t see why anyone would choose for option 2.

Audrey M. Roy Greenfeld · Answer 11 · Wed Sep 04 2013 18:51:14 GMT+0800 (China Standard Time)

@mathiasbynens I now agree with you about option 1 and am hoping to merge in your pull request about it.

But I'd still like to know the answer to explicit cross-brower HTML markup (option 2) for the sake of completeness -- if only to address it in the FAQ for people who can't put it into /favicon.ico due to some silly restriction from their sysadmin/company/server/framework.

So if anyone makes further progress on this, keep me posted!