Favicon in debug mode with Chrome

I build a page that displays a list of items with pagination. When users click on the pager, an ajax call is made to get the items for the next page and only the list is updated. I expect to see only one call to the database to get the next set of items when looking at the database trace while debugging the code. However, the trace shows that there is the call to get next set of items and all other calls required to render the home page (which is different to the page displaying the list of items). I put a breakpoint in the home controller and it indeed hits the home controller after going through action to get the next set of items.

This is very strange and it might cause performance issue when going to production because of all the unnecessary calls to the database. After about an hour of debugging and trying to figure out the issue, I decide to look into the network tab in Chrome developer tools. I notice that, after hitting the action to get next set of items, it makes a request to get the favicon. This is strange as I’m only expecting it to make one request to get the next page. The interesting thing is the request to /favicon.ico has a status code 301 permanent redirect. This redirects to the home page which results in all those extra calls to the database.

I check the solution and the favicon.ico is there in the root directory where it should be. I also test this on our test site on Azure (which is in release mode) and this issue does not exist. The page makes only one request to get the next set of items when clicking on the pager. This issue seems to happen only in debug mode.

So there are two strange behaviours:

1. Request to favicon after a request.
2. Request gets redirected to home page.

After a bit of research, I find that in debug mode, Chrome makes a blind request to ‘yoursiteurl’/favicon.ico. I test this in Edge and it does not make request to favicon like Chrome does. Also I figure out that the reason why it has a 301 status code is because I have my test site as an application under another website in IIS. I have it set up like that due to some special requirements in this project. The base website only has a webconfig that has a redirect rule to the test application when navigating to the base url. And because Chrome makes request to baseurl/favicon.ico, it gets redirected to baseurl/testapplication.

To stop this issue in debug mode with Chrome, add an ignore rule to for favicon.ico when registering routes on application start.

        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            routes.IgnoreRoute("{*favicon}", new { favicon = @"(.*/)?favicon.ico(/.*)?" });

            routes.MapRoute(
                "Default",
                "{controller}/{action}/{id}/{name}",
                new { controller = "Home", action = "Index", id = UrlParameter.Optional, name = UrlParameter.Optional });
        }