Determine IE10 Behavior

audreyfeldroy / favicon-cheat-sheet

Obsessive cheat sheet to favicon sizes/types. Please contribute! (Note: this may be in flux as I learn new things about favicon best practices.)

MIT License

9.85k stars 413 forks source link

Determine IE10 Behavior #3

Open waf opened 10 years ago

waf commented 10 years ago

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.

waf commented 10 years ago

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">

audreyfeldroy commented 10 years ago

@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?

xr09 commented 10 years ago

@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

ghost commented 10 years ago

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.

waf commented 10 years ago

@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"

mathiasbynens commented 10 years ago

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

audreyfeldroy commented 10 years ago

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 :)

shawnz commented 10 years ago

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.

audreyfeldroy commented 10 years ago

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.

mathiasbynens commented 10 years ago

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.

audreyfeldroy commented 10 years ago

@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!