I have been trying to use my own favicon on my vue.js project for some time. I replaced the original vue favicon with my own and it would not work.
I have tried everything every troubleshooting step I can find. Cache cleared, waited a few days, a query to override cache etc
I think I have now narrowed down the problem but cannot understand why it occurs. When I inspect the built web-app in the browser the link element which references the favicon shows the following:
<!--[if IE]><link rel="icon" href="/favicon.ico"><![endif]-->
The element is commented out and seems to have an if statement attached to it. Why is this?
Its a fallback when you are visiting the website in Internet Explorer below version 11
Internet Explorer <11 doesn't support .png images to be used as favicons, but only .ico files. Support for .png and .gif files only became supported from version 11 and onwards.
So thats why it has the if statement around it, the corresponding element will only be parsed when the browser is IE <11
Note that the <!--[if IE]><![endif]--> is only recognized by Internet Explorer 10 and versions below IE 10
https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/hh801214(v=vs.85)?redirectedfrom=MSDN
Related
I have the problem that my .svg favicon won't load anymore in any browser (IE, Edge, Chrome).
Cache is already cleared, also restarted Browser and tried Incognito-mode.
It's still reachable: favicon
Link to website
Code in head-Tag:
<link rel="icon" type="image/svg+xml" href="favicon_v1.svg" sizes="any"/>
Some hours ago I tested it on an other pc with chrome (same version) and edge and it worked there. I changed some things in the code but not the favicon-code.
Does anyone has an idea what the problem could be?
As you can see here, SVG favicons aren't anywhere near to being production-ready, why would you expect it to work in the first place?
You saying "doesn't work anymore" would suppose that you tested it with Firefox or Safari earlier, as those seem to be the only ones who kind-of support it.
I am working on a new web project and currently I am using the favicon files. Some time ago this was an easy task but nowadays almost the complete HTML header seems to be occupied by this topic:
Default favicon
iOS favicon
Microsoft favicon and tiles
Android favicon
Safari tabs icons
Chrome icons
...
All these elements are referenced using the standard <link /> tag. I now wonder when these elements are loaded:
Are all <link /> elements loaded by default or are the different browsers smart enough to only load such elements that are really used on the current platform/system? So is the Windows Tile Icon loaded on iOS as well?
The same is true for other elements that are referenced as <link />? Assume that there are 100 different style sheets linked in the header. Theoretically the browser could load these files in reverse order (later styles override earlier once). If all styles that are used in the current file are already defined in the last style sheet there is not need to load the other 99 files, is it?
Most likely in real life it is much harder to determine if a style sheet handles all possible stlyes than downloading and parsing/combining all 100 files.
However the question is the same: It seems that there are many cases when it is not necessary to download all <link /> elements. Are browsers smart enough to detect and use these cases?
Nowadays, you should declare at least 3 or 4 icons to support all browsers, and up to 20+ icons if you want to implement the full range of available icons. There are known issues regarding loading:
Firefox loads all PNG icons on the critical path (the link rel="icon" icons; not the Apple touch icons). The root cause is that FF does not support the sizes attribute. If you feel concerned by this, please vote for this bug.
Chrome loads more than one PNG icon, which is better than what it used to be, but still not perfect. Same root cause: Chromes does not support the sizes attribute. But apparently the Chromium team feels concerned about this.
iOS Safari often loads two different Touch icons. This is something I observed several times in server logs while testing icons with an iPad, but I don't have any solid material to provide here. Also note that iOS Safari regularly loads Touch icons in the root path by convention (for example, /apple-touch-icon-120x120-precomposed.png). So declaring less Touch icons, or even only one Touch icon, may not be a definitive solution: Safari may try to load some icons nonetheless and get 404s.
I have no data for Android Chrome or IE.
Assuming the response from:
How to prevent favicon.ico requests?
in Chrome and Android an IFRAME will generate 3 requests for favicons:
"GET /favicon.ico HTTP/1.1" 404 183 "GET
/apple-touch-icon-precomposed.png HTTP/1.1" 404 197 "GET
/apple-touch-icon.png HTTP/1.1" 404 189
And from: Will browsers request /favicon.ico or <link> first?
I guess that the browsers requests all the favicons in the <link> first, if no specified, then search for 'favicon' in the root of the folder.
FYI: You can take a look at: https://github.com/audreyr/favicon-cheat-sheet too to get more info! Hope it helps!
So on google chrome and its only on google chrome I can't seem to get my favicon for a specific page to work
I have a default favicon in the root directory call favicon.ico but I have another one called Lokor_favicon.ico the code im using for the specific page is as follows
<link rel="shortcut icon" href="/Lokor_favicon.ico?v=2" type="image/x-icon">
<link rel="icon" href="/Lokor_favicon.ico?v=2" type="image/x-icon">
on fire fox it can load the two different favicons based off what page I am on but on chrome it simply refuses to follow the code and goes with the default favicon anyways
any thoughts?
Chrome isn't trying to be difficult, there's just no defined way to handle multiple favicons, and each browser implements their own approach. The wikipedia article explains this:
http://en.wikipedia.org/wiki/Favicon#How_to_use
Here's the pertinent info:
If links for both PNG and ICO favicons are present, PNG-favicon-compatible browsers select which format and size to use as follows. Firefox and Safari will use the favicon that comes last. Chrome for Mac will use whichever favicon is ICO formatted, otherwise the 32×32 favicon. Chrome for Windows will use the favicon that comes first if it is 16×16, otherwise the ICO. If none of the aforementioned options are available, both Chromes will use whichever favicon comes first, exactly the opposite of Firefox and Safari. Indeed, Chrome for Mac will ignore the 16×16 favicon and use the 32×32 version if only to scale it back down to 16×16 on non-retina devices. Opera will choose from any of the available icons completely at random.
It's best to only offer one favicon. If you have a larger PNG version that you specify in your meta tags, then skip using the favicon.ico file altogether. All browsers will support that.
If you feel you need multiple icons for different parts of your site, then you're trying to use them in a way they were never intended, and you'll have mixed results. If you remove the favicon.ico file altogether, and instead let each page specify its own icon, then people will end up seeing the icon for the first page they visit. So if they get to your "about us" page from Google, they're going to see whatever icon the "about us" page specifies, for the duration of their visit and as long as their browser stores it in cache.
I have a website. It uses 2 Google webfonts for its headings and body text. These work fine on Chrome/IE/Safari (including mobile) but when I view the site on my office computer running IE9 on Win7 the Google fonts do not load and fall back to a sans-serif.
Here is what I see:
IE9:
Chrome:
I cannot figure out why IE fails to load the font as I am aware that Google font's are compatible with IE7+. I figure it might be a security setting but can't get to the bottom of it. Any ideas.
I don't know if this is the issue, but try changing your request to only one link tag:
<link href='http://fonts.googleapis.com/css?family=Oswald|Lato' rel='stylesheet' type='text/css'>
Perhaps loading two fonts in two different requests causes issues.
On my IE9 it looked the same as in Chrome. Press F12 and make sure you are using proper Browser and Document Mode.
Im finishing my website and am now in the validation and browser testing stage.
So, my whole website has been converted to html5, as the default theme wasn't. After adding the conditional ie 9 comment to apply the html5shiv.js to browser versions below ie 9, some of the pages render properly and some do not.
Please view this page in Internet Explorer 8 (or ie9 but in version ie 8 from developer mode) to see the broken html5 page: http://www.gizmotrims.com/site/gizmotrims/music-ipods/1-ipod-nano.html
I troubleshooted this issue and wasn't able to find what is actually causing the pages to not render correctly and appear broken. Please note that not all of the pages have this problem, only a few. Its weird because some pages are fine and some aren't.
Could someone help me find this problem so I can finish the development of my site?
The path to js/html5shiv.js does not seem to work. You could change it to ../js/html5shiv.js, but that will probably ruin it for other pages. In this case you are better off using the absolute path (http://www.gizmotrims.com/site/gizmotrims/js/html5shiv.js) or a path relative to the root (/site/gizmotrims/js/html5shiv.js). You could also set a base[href], but that would affect other references as well.