Did you notice that some sites have an icon next to the address in your browser? And this icon will be saved next to the link, if you add the site to your Favorites. This article is about how to make this icon to appear not only in all other web browsers, but also in IE8.
This article is a response to a great many blogs, and comments, and posts. People are complaining that, if you place favicon.ico in the root of your site, it immediately works for Firefox, but stubbornly will not work in IE8. I hope I am providing here a comprehensive answer on how to solve this problem.
The problem is in ICO file format. Firefox doesn’t care if you simply create a GIF file with transparency, renamed it into ICO and place it in the root of your site. It would display it anyway.
IE however (I testes with IE8) will not display the image file unless it was created with an editor that capable of handling this special ICO format. That is the short answer, and for the complete solution please read on.
After fighting with this problem for a while, I decided to summarize all the findings. Here are all the steps that I used.
|~~~ Side Notes ~~~|
|Test from a Different PC|
|A very peculiar behavior discovered!
You have to test your favicon.ico from a PC other than your IIS Web Server.
In various versions and flavors of IE8 and IE8 64-bit your icon will not appear,
if you run your test IE Session on the same PC as your IIS Server.
First, let’s see how web leaders do it. Do Google, or Microsoft, or Fidelity place any link reference strings in the header of their pages? – No.
Second. Let’s grab one of their working icons and see, if it will work on my site without any (!) code changes. – Yes. It starts working immediately in ALL web browsers including IE8. All I need to do is just copy favicon.ico the in the root of my web site.
Third. If I make any changes to the image using MSPAINT, does the image still works? – No. As soon as I open the ICO image in MSPAINT and simply save it, it will no longer show up in IE8.
What to Do?. I need to find a tool that allows manipulating and saving this type of files without ruining them.
All these years since 1992 I was using MSPAINT. It was a sufficient tool for every conceivable image editing need. Once in blue moon I would use a WebImage.exe (1996) to add a transparency. So you can understand my reluctance to try anything new.
What if I try an old, but powerful Photoshop? To my complete surprise, old Photoshop 6.0 installed on latest Windows 7 64-bit operating system without a complaint or an error, but the software was so old, it didn’t know how to open ICO files. My next surprise was to find a plug-in for that.
I used a free (author asks for a $5 donation) Photoshop plug-in from http://www.telegraphics.com.au/sw/#icoformat to be able to open and edit ICO files. I picked “Windows (incl. Vista format icons)” download. And it worked. You just place a file ICOFormat.8bi into %ProgramFiles(x86)%\Adobe\Photoshop 6.0\Plug-Ins\File Formats and Photoshop begins to understand a new file type.
|~~~ Side Notes ~~~|
|It appears that entire corporate network can be configured not to display these icons on user computers. We discovered a case, when the same HP laptop with IE7 will display favicon.ico, when connected from home, and will ignore these icons for all sites, when connected from work.|
And then it was an agonizing fight with a Photoshop user interface. Every little step of the way was a pain. Even to draw a simple circle contour was a herculean task. Photoshop has a very steep learning curve, and so-called Help is completely useless. But now we have Internet, and Internet has answers to every single question you might have. I felt like I was using a world most powerful computer to do a simple subtraction and multiplication.
Several hours later a new ICO icon was born and placed into the root of web site, and everything begin to work even with finicky IE8. Hurray!
So here is a final recipe for you:
-01- Start with an existing icon file that already works in IE8. To get it, point your browser to any of the big-boys sites (http://www.microsoft.com/favicon.ico or http://www.google.com/favicon.ico or https://www.fidelity.com/favicon.ico).
-02- Obtain an editing tool that can open and save this ICO file without butchering it;
-03- Edit the icon and place it into the root of your web site without any modifications to your code.
-04- Test the icon in IE from any other computer, but not from machine that runs your site IIS Server. IE will not display the icon, if you are testing it from the same machine.