Hi,
I was reading up on favicons (yes, I never used those before) and now I have few doubts.
Which browsers (and from which version onwards) support favicons, also which file formats are supported i.e. only .ico or others? As for usage, is placing them in the “root” directory enough or do some browsers require using something like the following:
<link rel="shortcut icon" href="favicon.ico" />
Please clarify? Thanks. 
can’t really try in ie 7, only using developer toolbar and set ie 7 mode. but it works like that, it’s showing favicon on both pages. but again, it’s not really ie 7. but your bit depth on the icon (may be) showing you are having a more than 256 colours icon (at least that’s what i get).
Yes, it’s a 16x16 indexed color true icon (ico file, not renamed). I tried directly setting path without “/” the current is like the following:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
Same problem as before: Placing favicon.ico on root directory does work for all browsers except in IE6 & IE7. It works for example when going to cssexp.99k.org but not when cssexp.99k.org/index.html or any other pages.
It doesn’t seem to be recognizing the <link /> at all.
Try out http://cssexp.99k.org and http://cssexp.99k.org/index.html in IE7- (favicon: http://cssexp.99k.org/favicon.ico).
I can confirm most of what Kalon has said. As far as cross-browser compatibility, it is not IMO an issue with favicons. The favicon either works (and appears) or it doesn’t and the tabs are displayed as they would if you had no favicon available. There are no issues with favicons “breaking” either themselves or other features, so there’s no reason NOT to use them.
This is the reference I use.
[SIZE=3]<link rel="shortcut icon" href="../Path/To/Image/Folder/EcBeta.ico" type="image/x-icon" />[/SIZE]
I’ve been “told” that you don’t need a link element at all, that you can simply drop your icon file into your root directory with the name “favicon.ico” and it will be automatically served with any page. I’ve also been told that the .ico is not a requirement, that you can use any file type if you provide a link like this (as long as it meets the 16x16px requirements of an icon. However, I have never TESTED those reports. The code above is what I’ve always used and I’ve tested successfully in all the browsers Kalon mentioned.
For .ico files, they are supported natively by GIMP, and if you know what you’re looking for, there is a simple config file you can obtain to open and save .ico files in Photoshop. Photoshop uses something called a *.8bi file for each file type it works with. Do a search on “icon 8bi photoshop” and things like that and you will pretty quickly find downloads and instructions on which directory in photoshop the 8bi files live. Then you just copy it into that folder, restart Photoshop and you’re good to go.
Placing favicon.ico on root directory does work for all browsers except in IE6 & IE7. It works for example when going to cssexp.99k.org but not when cssexp.99k.org/index.html or any other pages. However, in an inner directory e.g. cssexp.99k.org/testcases/favicon/index.html - it works as long as it has .ico file in this directory (any filename i.e. not favicon.ico).
And using these absolutely have no effect on IE:
<link rel="icon" href="/favicon.ico" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
Anyone want to explain it to me?
All browsers support Favicon’s (provided in a proper .ico format) however I suspect the bug you are suffering is due to the fact that IE5 and IE6 do NOT show Favicons (by default) unless you have that specific page bookmarked (which is when it uses the cached file). There’s a whole range of caching bugs related to Favicons in IE6 and below (and IE7) and what makes it worse is that browsers should NOT be attempting to look for favicon files by default in the base directory (same goes for robots.txt) as it violates the HTTP specification - you really need to reference the icons as some browsers don’t automatically seek the file. If you have the link in the header, it should find the file relative to where you’ve linked it and it will display properly, but as stated IE6 requires bookmarking that page in order to use the favicon properly. It’s also worth saying that other browsers support other formats for Favicons such as PNG, GIF and JPEG (in fact, Apple Favicons for the iPhone require PNG format). Basically, there’s not much you can do about the issues in IE6 and IE7, their strange and quite temperamental and usually sort themselves out.
I noticed something, <link /> doesn’t seem to recognized the icon if it’s in root directory. Consider the following:
<link rel="shortcut icon" href="http://cssexp.99k.org/favicon.ico" />
<link rel="icon" type="image/x-icon" href="http://cssexp.99k.org/favicon.ico" />
or
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
Here, the <link /> does not recognize the icon.
However, placing a copy of the icon in another directory … say “images” for example and doing the following works:
<link rel="shortcut icon" href="http://cssexp.99k.org/images/favicon.ico" />
<link rel="icon" type="image/x-icon" href="http://cssexp.99k.org/images/favicon.ico" />
or
<link rel="shortcut icon" href="/images/favicon.ico" />
<link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
Is there any explanation for this behavior? piratically both are paths to the image, but why doesn’t it gets recognized when it’s placed in root directory?
It’s probably a bug where it is not showing because it hasn’t been bookmarked, i.e. added to “Favorites”. Technically the correct method is; rel=“icon” <link rel=“icon” href=“…” type=“…” /> although the browses do seem to differ. You could try another ICO creating tool just in case.
I suspect there is a bug in that browser version the icon MUST ALWAYS be placed in the root hence plain: href=“favicon.ico” should work if you use an official Microsoft Icon File.
Other than that you have a strange Server setup going on that is preventing the access to file. Though like I said you need to have it in your ‘favorite’ list for some buggy versions of M$IE
In fact I just tested it within M$IE6 and it works if you add it to your ‘Favorites’ then access the page via the ‘favorites’ drop-down.
If you cannot get it working on your machine I suggest clear; all temporary internet files, cache, history and so forth then try again… as you probably have a slight corruption occurring that needs purging and the browser is using that instead of a fresh version.
you should try it first the safe way:
<link rel="shortcut icon" href="path/favicon.ico" type="image/x-icon">
<link rel="icon" href="path/favicon.ico" type="image/x-icon">
make sure it’s also a 16x16 true icon file, with 256 colours.
you should also lose the / in front of favicon.ico.
<link rel="icon" href="favicon.ico" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
here are some guidelines and tips:
these old advices for favicon are from here and some other places (don’t really remember now, sorry)
and finally, there is an article on MSDN called: “How to Add a Shorcut Icon to a Web Page” here. enjoy it it’s just a way of saying read it and hope it will work
Until Internet Explorer 7, shortcut icons would appear only when users added a page to their Favorites. Starting with Internet Explorer 7, shortcut icons will always appear when one is available in a supported format.
Could anyone else also confirm the bug I mentioned earlier? If there is no workaround then I’ll leave it at that. I just want to make absolutely sure why <link /> is working in certain situation and not in others. This mainly concerns IE6/IE7 alone as just placing favicon.ico in root directory is enough for all other browsers. And the fact that I can’t use <link /> in IE to read from the root directory (have to place icon in sub-directory in order to work) is frustrating.
Thanks.
I’m using photoshop plugin to save ico file, since there is no option to directly set color like in saving gifs - I go to Image > Mode > Indexed Color. It comes up with a option box stating that there is only “7” colors, then I go File > Save As choose .ico format and save it.
The problem here is that IE does recognize it when going through http://cssexp.99k.org and only not in other pages or directly through index.html. The <link /> is definitely not being recognized for some reason.
I’m using PS CS5, and have actual Internet Explorer 7 installed. You could try Spoon Browser Sandbox to test it out.
I think favicons are worth using - mainly from the point of view the favicon is inserted next to the url in the user’s browser favourites/bookmarks which make urls easier to identify in a long list.
I create the icon originally as a .jpg and then convert it to .ico at chami.com
I don’t know if they still do, but chami used to output both static and animated favicons.
To use either or both I use
<link rel="shortcut icon" href="./pics/favicon.ico" />
<link rel="icon" href="./pics/animated_favicon1.gif" type="image/gif" />
in the <head>
Afaik, favicons are supported in at least IE7+, FF2+, Opera 9+ and Safari for Windows.