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.
Related
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 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.
In my website I have a stylesheet that is being rendering in the html with the following line:
<link rel="stylesheet" type="text/css" media="all" href="http://localhost:61000/test/portal_css/Keith%20Theme/keithCustom.css"
All of these styles are being used on the site, but if I go to the resource tab of the developer tools it has my keithCustom.css stylesheet under the resources/images. This is annoying because it prevents me from being able to look at the stylesheet from the developer tools.
I was wondering if anyone's ever ran into this, or if this might be a bug with chrome.
I can always use Firefox to look at it, but I use chrome as my main browser and I would really like this too work.
Any suggestions or comments would be greatly appreciated.
EDIT: Turns out someone has already asked this question and I didn't find it in my original search Google Chrome Developer tools - CSS file showing as an image resource, the solution here worked like a charm
Apparently Chrome isn't interpreting your CSS file as an actual CSS file. Could it be its URL's fault? Does it happen when you browse the same page with its stylesheet on another server? Or try to use a relative path instead of an absolute path on the href attribute.
You could also check the CSS file's encoding. AFAIK the UTF-8 BOM signature can ruin lots of PHP scripts. It might be confusing Chrome, causing it to think the file isn't a plain text stylesheet…
Hope it helps at least clearing some possible suspects!
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.