Comments (11)
waf
commented on May 28, 2024
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">from favicon-cheat-sheet.
audreyfeldroy
commented on May 28, 2024
@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?
from favicon-cheat-sheet.
xr09
commented on May 28, 2024
@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
from favicon-cheat-sheet.
commented on May 28, 2024
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.
from favicon-cheat-sheet.
waf
commented on May 28, 2024
@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"
from favicon-cheat-sheet.
mathiasbynens
commented on May 28, 2024
Just don’t bother using any HTML and place the favicon in /favicon.ico. (old post but still relevant)
from favicon-cheat-sheet.
audreyfeldroy
commented on May 28, 2024
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 :)
from favicon-cheat-sheet.
shawnz
commented on May 28, 2024
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.
from favicon-cheat-sheet.
audreyfeldroy
commented on May 28, 2024
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.
from favicon-cheat-sheet.
mathiasbynens
commented on May 28, 2024
But, IE9+ will support
rel=iconif you specify atypeofimage/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
shortcutlink relation anymore if you specifytype="image/x-icon". Needless to say, this still sucks — all the more reason to just name the iconfavicon.icoand place it in the root of your domain.
The way I see it, the options for favicons are:
- use
/favicon.icoand 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.
from favicon-cheat-sheet.
audreyfeldroy
commented on May 28, 2024
@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!
from favicon-cheat-sheet.
Related Issues (20)
- Add Favicon Generator HOT 1
- Favic-o-matic - Universal Favicon Generator HOT 4
- Update for Chrome on Android HOT 3
- Additional IE10 Metro markup options HOT 1
- SVG Support HOT 5
- Broken link in helpful tools
- Great generator tool HOT 3
- "Not a valid image" error when filename includes an ampersand HOT 3
- Sizes for iPhone 6(S) Plus and iPad Pro HOT 4
- Broken netmagazine link HOT 2
- Hello add this cheat sheet to awesome-cheatsheet
- Refreshing the favicon (docs addition)
- Unclear copy HOT 1
- References to 'obsessive' inclusion of additional sizes
- Edit Documentation
- Safari's pinned mask-icon, as modified in OS X 10.11
- Contradiction on HTML tag HOT 2
- Strong recommendation - Image2Icon
- Add favicon generator www.favicon-generator.org
- Web favicon
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from favicon-cheat-sheet.