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.
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 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.
Is there anyway to add favicon [GIF & ICO] through CSS or I need to add the tag in every HTML pages ?
The favicon can not be defined in CSS. If you want reliable behaviour, you should use the HTML tags.
Browsers will usually automatically look at /favicon.ico if an icon isn't defined in HTML. Putting an .ico file here will work in all browsers, but this won't work for other file types.
I am not sure about having the Icon in CSS but if you put the icon in the root folder of your site browsers will show the icon correctly. (As A ICO Format)
This has good information here http://en.wikipedia.org/wiki/Favicon
Google chrome doesn't seem to bother to display an <img> with cross origin src attribute.
Firefox does. So for Firefox one would need to use an iframe which works fine for .png images. But it turns out that Firefox doesn't handle well iframes with an .ico src attribute: Firefox simply doesn't seem to create the appropriate elements in the iframe.
So the question is: is it possible to display a cross origin .ico image in Firefox?
Thanks!
<img>'s src doesn't have a cross origin policy by default. That's why you can link your images from almost everywhere (almost, because you can set your host not to allow hotlinking -maybe that's what appears here-).
Anyway, please, try to avoid the use of .ico in a <img> tag because it won't be shown in every browser as #Pekka said. Some will anyway because many software save .ico file as .png (kinda like a camouflage) but it still a trick...
The iframe trick won't work either.
In summary, use .ico only if you need to but avoid it if you want a nice compatibility with every browser.
google chrome doesn't seem to bother to display an with cross origin src attriubte.
that is definitely incorrect. Your problem probably doesn't have to do with the image's origin, but with the format. ICO is mainly a Windows format and will not be reliably displayed across browsers.
The Wikipedia browser comparison on image formats doesn't list ICO at all.