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.
Related
I want to add Quicksand Font to my website so google prompted me to add the following -
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=**Quicksand:wght#500**&display=swap" rel="stylesheet">
My question is - what is the advantage we are going to get with first line of code i.e. preconnecting to fonts.googleapis.com
I mean I get the point of preconnecting to fonts.gstatic.com as the fonts files are residing in that domain
Modern browsers try their best to anticipate what connections a page will need, but they cannot reliably predict them all. The good news is that you can give them a (resource 😉) hint.
Adding rel=preconnect to a informs the browser that your page intends to establish a connection to another domain, and that you'd like the process to start as soon as possible. Resources will load more quickly because the setup process has already been completed by the time the browser requests them.
https://web.dev/i18n/en/preconnect-and-dns-prefetch/
All major browsers (Google Chrome, Apple Safari, Microsoft Edge) displays a blank space in place of the text that uses the font until the font has loaded.
Mozilla Firefox alone displays the text in the default font, and then re-renders text in the font once it has loaded.
So to have better user experience, the Link Type rel="preconnect" is used so that when the link is followed the linked content can be fetched more quickly.
MDN Documentation:
Link types: preconnect
The preconnect keyword for the rel attribute of
the element is a hint to browsers that the user is likely to
need resources from the target resource's origin, and therefore the
browser can likely improve the user experience by preemptively
initiating a connection to that origin.
Browser specific behaviors of different browsers with web fonts is as follows
Google Chrome
Chrome renders the rest of the page, but until the
font has loaded, it displays a blank space in place of the text that
uses the font.
Mozilla Firefox
Firefox first displays the text in the default font,
and then re-renders text in the font once it has loaded. This behavior
is known as a "flash of unstyled text."
Apple Safari
Safari renders the rest of the page, but until the font
has loaded, it displays a blank space in place of the text that uses
the font.
Microsoft Internet Explorer
Internet Explorer renders the rest of
the page, but until the font has loaded, it displays a blank space in
place of the text that uses the font.
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.
Stack Overflow:
Google:
My site:
How come Vivaldi picks nice accent colors for most websites, but on my site (which is white, black and blue) it goes with the default red, which clashes horribly with the color scheme.
How do I control the accent color of Vivaldi?
While I haven't come across any official statement so far, it seems that Vivaldi determines the accent colour mainly from a site’s favicon. However, the HTML standard also specifies a meta element named theme-color that can be used „to customize the display of the page or of the surrounding user interface”, and Vivaldi respects this tag when it is present in the source code. Of course, this meta tag will also affect other browsers with similar features, such as Chrome for Android.
This is not an answer. It is a follow-up to the comment I posted yesterday under the answer by J5lx. I saw some strange behavior that I want to describe in case it helps anyone else. The gist of the following story is that the favicon needs to be A.png. (EDIT: or favicon.ico; see the comments below)
I was not happy with the favicon that I used yesterday, so I edited it. I changed the href in the link tag from A.png (yesterday's favicon) to Aa.png (the new version), and Vivaldi stopped using the theme-color. It still changed the tab bar color to something other than the default, but the color seemed to be picked from the pixels in the favicon. I continued to edit the favicon, each time giving it a different name. Vivaldi continued to pick its tab bar color from the favicon rather than the theme-color. I thought that my editor might be adding a field to the .png file which Vivaldi was prioritizing, so I recreated favicons using the same procedure that I had done for the original one (snipping, then scaling with MS Picture Manager). Even then, Vivaldi did not use theme-color. It only worked correctly with the original favicon, A.png. Eventually I got the favicon to look pretty good. The file was Dd.png, and Vivaldi still wasn't behaving correctly. I decided that someday when I learn more about the png file format, I will need to figure out what the difference is between A.png and Dd.png. I moved all my favicon test files to an archive folder and copied Dd.png back to htdocs. I wanted it to be called A.png, so I changed its name. Suddenly, Vivaldi started using theme-color for the tab bar color!! I changed the name back to Dd.png, and Vivaldi used a favicon color. I randomly picked another favicon file from the 18 that I had tested, and after naming it A.png, Vivaldi worked correctly. It seems that any png favicon will work, as long as it is named A.png. It also needs to be at the website root. I tried putting it into a subfolder, and it didn't work. Also, I used my editor to save the favicon as A.ico, and Vivaldi did not use theme-color with that. Apparently it has to be A.png.
My Vivaldi is v2.10.17 x64 on windows 7, and I am serving the page from apache on localhost.
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!
I am able to use favicons if I copy one from another site and test. But my own doesn't work in IE8/Chrome. Mine is a 32x32 24bit icon created by Visual Studio. I always seem to have problems getting icons working right, what should I use? I thought I could have images up to 64x64...
See this site for instructions for creating a favicon.ico - it needs to be 16*16, not 32*32 (though you can have a composite .ico with both sizes).
I have created composite .ico files with several sizes, so they appear correctly on the browser and the desktop.
First, just to be safe, convert your original icon to an .ico using this converter.
Then, for cross-browser compatibility (specifically Internet Explorer), use:
<link rel="shortcut icon" href="http://www.yoursite.com/youricon.ico" />
Most browsers are smart enough to use any PNG/ICO named favicon.ico located in the root of your site, but this is not always reliable.
The wikipedia page on favicon contains a lot of information.
The support for favicons differ a bit from browser to browser, and there is no guarantee that the favicon will work on any given system. Sometimes the browser just ignores it for no apparent reason.
To get the widest browser support, you should use the .ico format. There is a compatibility chart on the wikipedia page that tells you how widely supported each format is.
You need to use 16x16 .ico file. 32x32 .ico files and .png, .jpg files don't always work in browser title bars. Nowadays you might find some browsers support this but not every browser does this so try to stick to 16x16 .ico files.
I was facing the same issue, you just have to add some extra character,
example: if you have written C:\Users\Desktop\image\icon.ico for fetching the image then you just have to add ?v=2 like this
"C:\Users\Desktop\image\icon.ico?v=2".
or you can just change the format to .jpg, .png etc.