Implementing a favourite icon (favicon) in ASP.NET

Implementing a favourite icon (favicon) in ASP.NET

When the thought of adding a favicon, or rather, a favourite icon to your website appears on your todo list, you instantly think it’s a quick, easy 5 minute job. In most scenario’s, it is, however adding a favicon to an asp.net website can be a whole different kettle of fish.

Sure, the principles are the same, you add a basic tag to the header of your page, usually within a master template, and you make sure you have a nice looking 16×16 favicon.ico file located in your web root. Depending on your site configuration though, you might be about to embark on an absolute nightmare of a journey. That is, of course, unless you are reading this handy tip.

If you add the HTML for a favicon and start to test in your favourite web browser (assuming that’s not Internet Explorer 7…), you’ll notice the favicon (should) work flawlessly, and hopefully looks pretty nice too. But, you may find, when you check your favicon in Internet Explorer 7, you’re presented with the default, boring IE icon in your address bar, and no favicon!

After a few hours of Googling and scratching your head, making several tweaks to your code, tweaking your icon, a broken ‘F5′ key, and wondering what the problem is, you’ll probably begin to think it’s just Internet Explorer being funny and deciding not to play nice. In a way, thats true, but there is a way to resolve it.

Your ASP.NET website should have a ‘web.config’ file in your web root, containing various different configuration entries. One particular entry is:

<staticContent>
            <clientCache cacheControlMode="" />
</staticContent>

If ‘cacheControlMode’ is set to ‘DisableCache’, then this could very well be the reason that your favicon does not display correctly in Internet Explorer 7. In our case, this setting was preventing IE7 from placing our favicon into its own cache, and thus did not show correctly.

As a workaround, we have used the following three lines of code to allow IE7 to cache content (and the favicon):

<staticContent>
            <clientCache cacheControlMode="NoControl" />
</staticContent>
 
 

The end result is a perfectly working favicon in Internet Explorer 7, and all other major browsers.

Unfortunately there does not seem to be much documentation on this from our time spent Googling the issue, so we hope this is of some use to any other web developers experiencing the same issue as us.