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!
Related
This question already has answers here:
How to add a browser tab icon (favicon) for a website?
(13 answers)
Closed 11 months ago.
When I want to add a favicon I write this tag::
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
But when I open the web page I don't see the favicon. Why?
There are many possible causes for this behavior, and browsers are in the habit of silently ignoring anything that they do not understand, so it is hard to tell exactly why it happens.
To troubleshoot this, you should start by opening up the developer tools (F12 on chrome) and seeing whether any errors were logged. For example, your developer tools might look like this:
Some possible causes:
The browser is not looking for the icon there where you think it should look. Check the path. Is the file there? Is another file in the same location served correctly?
The icon is not an ico file. Many people nowadays are not aware of the fact that "ico" is a special file format, so they take any image they happen to have and they just rename it to ".ico" and they expect this to work. This will not work, because ".ico" is a specific image format. Look it up. Use a converter to convert your image to ".ico" format. There exist several free online converters for that. Alternatively, store your icon in a familiar format (say, png) and specify type="image/png" and href="favicon.png" (as another answer suggests)
If the icon is in fact an ico file, the browser expects it to have specific details. Most likely, the browser expects it to contain a 16x16 image, possibly even with a specific color depth, and the browser perhaps even fails to use it if, in addition to the 16x16 image, it also contains images in other resolutions. ".ico" files are complex, and browsers are sometimes way pickier than they should be.
I have a new website with a set of favicon images auto generated from a source file using Real Favicon Generator, and there are:
9 Apple favicons
1 Android favicon
3 named favicons
1 Safari pinned SVG
1 json manifest
1 set of Microsoft tile image/colour
Obviously most of these can be placed for their respective vendors - Apple, Microsoft tiles, etc.
I have an issue in that running the website on Firefox, I want the favicon it uses to change but I do not know which one it actually uses?
I have read this question but the stated answer on here is incorrect and
Firefox and Safari will use the favicon that comes last.
is no longer true.
Obviously it's a time consuming repetition to go through ~15 images to find the one that gets changed on one browser, and I actually found that Firefox 42 selects the 96x96 dimension favicon, rather than the last one presented.
Question:
Is there a way [aside from trial and error] to load a page and then find a declaration in the browser defining which image from the HTML head is used as the page favicon in that browser?
Additional Information:
There is an incomplete reference list here. However, this misses out various versions and various OS, and I can only assume these details where found from trial and error.
While this is useful, the various links and solutions on that question give a single URL result for an automated process, such as
http://www.google.com/s2/favicons?domain=www.domain.com
Which works fine in returning a valid favicon but it does not return the favicon that my browser uses when I tested it.
Other links from that question are similar, most only returned a 16x16 favicon and many clearly did not return the image used. Some probably didn't return the image used... it is hard to differentiate 16x16px sometimes!
You can use the Compatibility test of RealFaviconGenerator. The test will ask you which icon you see. But there is a twist: the test is not really for the end-user, so you will have to right-click the image corresponding to the icon you see, inspect it, and look at the alt attribute of the img tag. But that will prevent you from playing with 20+ images to make them different. Much easier!
Full disclosure: I'm the author of RealFaviconGenerator.
Note: I would be interested in your investigations to fix the answer you mention (I'm his author).
Using the Inspect Element, or just Inspect tool, available in Firefox and Chromium. The Network tab shows all http operations related to reload. Filtering by 'favicon' most likely peeks the correct operation, when the page is reloaded.
The fact that the browser downloads an image is a strong hint of what gets displayed. Yet, doubts can persist, e.g. which part of an .ICO. Unfortunately, the tab is a computed element not visible in the (computed) page source.
On Firefox, the iconuri is visible in the json code of exported bookmarks.
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 am using two Google Web Fonts at my website. They are Roboto Slab and Fauna One. They look good in latest Mozilla Firefox and IE10 but for some reason they look horrible in Google Chrome.
They are linked to my website as follows:
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Fauna+One' rel='stylesheet' type='text/css'>
It took me a while to realize that Google Chrome has a problem with web fonts and that it renders them poorly. I am wondering if there is solution for this?
What if I download those two font types and embed them into the main directory of my website and then call them through CSS via #font-face property? Would Google Chrome in that case render those fonts nicely or I would still have the same problem and poorly rendered fonts???
Or there is some other solution for this issue?
Thank you all!
I believe I saw some bug report for Chrome where it was mentioned that this will be fixed - but I'm not 100% sure. I believe that it's not actually 100% the fault of Chrome...
My understanding is that the problem is to do with the order in which font types are presented in the #font-face directive. So, Chrome handles more than one type but not all types will render at equal quality. Apparently, Google actually doesn't serve the fonts in the right order from fonts.google.com - somehow...
In the end I found that, with Roboto at least (which I'm also using on a project), it is available for use on Font Squirrel (and open sourced under the Apache 2.0 license) - so you can download it here: http://www.fontsquirrel.com/fonts/roboto (download the Webfont Kit for full cross-browser font support) - you lose the CDN goodness of having it hosted on Google's servers if you use it from your own web server but, IMHO, I'd rather lose a few milliseconds than have to deal with such terribly rendered text...
I can't help you with Fauna One, unfortunately - it doesn't appear to be listed on Font Squirrel - perhaps you can find it on another font site? Or another similar font which is available on font squirrel?
From a web browser perspective (Chrome being the browser in question), Chrome 35 in Windows has difficulty rendering some fonts, like Roboto, without some horrible artifacts that make the font difficult to read.
There is a feature called DirectWrite that will be included by default in future versions of Chrome that will fix this problem. You can enable it now in Chrome 35 by going to chrome://flags in your browser URL bar. You can Enable DirectWrite (experimental in Chrome 35), close your browser, open and try again.
Just to be clear, I discovered this problem on Chrome 35 for Windows. DirectWrite is a DirectX API for rendering fonts in Windows. Chrome by default uses Windows Graphics Device Interface (GDI) which seems to be the problem.
See this article
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.