Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Determine IE10 Behavior #3

Open
waf opened this issue Sep 2, 2013 · 11 comments
Open

Determine IE10 Behavior #3

waf opened this issue Sep 2, 2013 · 11 comments

Comments

@waf
Copy link

waf commented Sep 2, 2013

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
Copy link
Author

waf commented Sep 2, 2013

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
Copy link
Owner

@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
Copy link

xr09 commented Sep 2, 2013

@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
Copy link

ghost commented Sep 2, 2013

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
Copy link
Author

waf commented Sep 2, 2013

@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
Copy link
Contributor

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

@audreyfeldroy
Copy link
Owner

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
Copy link

shawnz commented Sep 4, 2013

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
Copy link
Owner

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

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

@mathiasbynens
Copy link
Contributor

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:

  1. use /favicon.ico and don’t bother using any HTML
  2. 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
Copy link
Owner

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

@zrisher zrisher mentioned this issue Aug 16, 2014
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@audreyfeldroy @mathiasbynens @waf @shawnz @xr09