260

What is the final/best recommendation for how to serve favicon.ico in ASP.NET MVC?

I am currently doing the following:

  • Adding an entry to the very beginning of my RegisterRoutes method:

    routes.IgnoreRoute("favicon.ico");

  • Placing favicon.ico in the root of my application (which is also going to be the root of my domain).

I have two questions:

  • Is there no way to put the favicon.ico somewhere other than the root of my application. It's pretty icky being right there at the same level as Content and Controllers.

  • Is this IgnoreRoute("favicon.ico") statement sufficient - or should I also do the following as discussed in a blog post from Phil Haack. I'm not aware of ever having seen a request to favicon.ico in any directory other than the root - which would make this unnecessary (but it's good to know how to do it).

    routes.IgnoreRoute("{*favicon}", new {favicon=@"(.*/)?favicon.ico(/.*)?"});
tRuEsAtM
  • 3,517
  • 6
  • 43
  • 83
Simon_Weaver
  • 140,023
  • 84
  • 646
  • 689
  • 4
    Your regular expression should be '\.' for the dot in favicon.ico, not just '.'. – NathanAldenSr Sep 06 '12 at 03:41
  • 1
    This is what I use (it takes @NathanAldenSr's advice into account, supports both forward and back slashes, and also allows for favicon.png files): `routes.IgnoreRoute("{*favicon}", new { favicon = @"(.*[/\\])?favicon\.((ico)|(png))(/.*)?" });` – BrainSlugs83 Jun 23 '15 at 21:28
  • @BrainSlugs83 - You solution added the missing piece for me which was the slashes...Here is a .NET vNext version (beta-5). `routes.MapRoute("IgnoreFavicon", "{*favicon}", new { favicon = @"(.*[/\\])?favicon\.((ico)|(png))(/.*)?" });` – Rentering.com Dec 06 '16 at 13:45
  • Correction, vNext Ignore Route `routes.MapRoute("Ingore", "{*favicon}", new { }, new { favicon = @"(.*[/\\])?favicon\.((ico)|(png))(/.*)?" });` Notice thew `new {}`, – Rentering.com Dec 07 '16 at 15:34

9 Answers9

235

I agree with the answer from Chris, but seeing this is a specific ASP.NET MVC question it would be better to use either Razor syntax:

<link rel="icon" href="@Url.Content("~/content/favicon.ico")"/>

Or traditionally

<link rel="icon" href="<%= Url.Content("~/content/favicon.ico") %>"/>

rather than 

<link rel="icon" href="http://www.mydomain.com/content/favicon.ico"/>
AlexC
  • 10,676
  • 4
  • 37
  • 55
  • 3
    True. My answer was illustrating the "generic" version (HTML), so anyone could modify to suit their choice of framework/language :) – Chris Apr 06 '12 at 08:29
  • 2
    @Diego - Yes, rel="SHORTCUT ICON" is non-standard implementation used by Internet Explorer. The space is a separator character in W3C standards (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link). In browsers other than Internet Explorer the correct syntax is - see http://www.jonathantneal.com/blog/understand-the-favicon/ for more. Obviously you can use the Razor or Web Forms syntax for the path to the icon as above. – pwdst Jun 28 '13 at 09:54
  • 3
    With MVC 4 you won't need the Url.Content in this case as that will be handled automatically, you can just use; – Stuart Hallows Oct 07 '15 at 23:51
209

Placing favicon.ico in the root of your domain only really affects IE5, IIRC. For more modern browsers you should be able to include a link tag to point to another directory:

<link rel="SHORTCUT ICON" href="http://www.mydomain.com/content/favicon.ico"/>

You can also use non-ico files for browsers other than IE, for which I'd maybe use the following conditional statement to serve a PNG to FF,etc, and an ICO to IE:

<link rel="icon" type="image/png" href="http://www.mydomain.com/content/favicon.png" />
<!--[if IE]>
<link rel="shortcut icon" href="http://www.mydomain.com/content/favicon.ico" type="image/vnd.microsoft.icon" />
<![endif]-->
Chris
  • 6,568
  • 3
  • 22
  • 21
  • 25
    You need to use @Url.Content to generate the link so it works in all environments. See AlexC's response – RickAndMSFT Mar 27 '12 at 15:59
  • 5
    True, for ASP.NET. My answer illustrates the "generic" version (plain HTML), so anyone could modify to suit their choice of framework/language :) – Chris Apr 06 '12 at 08:29
  • It is *important* to note that IE10 does not support conditional comments, so this will not work for users with that browser. A solution would be to add your favicon to the root directory of your site, which IE10 will pick up automatically if it doesn't find a link for a favicon anywhere. – Kevin Babcock Jun 27 '13 at 08:39
  • 2
    IE11 Understand PNG favicon and don't need to conditional statement. You should see this good article: http://www.jonathantneal.com/blog/understand-the-favicon/ – QMaster Aug 25 '14 at 09:12
  • Thank you dude! Bottom part really helps me work with png, it just needs to be at the top of the page, masterpage or layout. – Alper May 09 '19 at 13:02
24

1) You can put your favicon where you want and add this tag to your page head

<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />

although some browsers will try to get the favicon from /favicon.ico by default, so you should use the IgnoreRoute.

2) If a browser makes a request for the favicon in another directory it will get a 404 error wich is fine and if you have the link tag in answer 1 in your master page the browser will get the favicon you want.

Eduardo Campañó
  • 6,778
  • 4
  • 27
  • 24
  • 2
    browsers will go and look for the .ico file if you bookmark the site - so this doesn't help that. but i'm wondering if the browser remembers that. i just know that in Fiddler sometimes I see a whole slew of icons being retrieved. perhaps that is google toolbar though? – Simon_Weaver Jan 28 '09 at 12:09
  • i think you're right, icons for bookmarks only work sometimes, I've never figured out why, maybe this is the case – Eduardo Campañó Jan 28 '09 at 14:10
7

I think that favicon.ico should be in root folder. It just belongs there.

If you want to servere diferent icons - put it into controler. You can do that. If not - just leave it in the root folder.

dmajkic
  • 3,448
  • 1
  • 18
  • 24
  • 1
    I agree. It is in the root folder and should not be anywhere else... There is no need for a HTML Tag for the favicon if it is in the root folder. Works with all common browsers... – Vinz May 20 '15 at 10:48
  • At first, this seemed like absolute bull to me, but apparantly there is no way around it, our logging keeps showing 404 errors from different user agents. – Michiel Cornille Sep 20 '16 at 08:14
5

None of the above worked for me. I finally solved this problem by renaming favicon.ico to myicon.ico, and reference it in the head <link rel="icon" href="~/myicon.ico" type="image/x-icon" />

Tracy Zhou
  • 714
  • 1
  • 7
  • 11
  • Adding to this, on .NET 6 and Blazor Server this also works. I don't know why ASP.NET just won't allow us to replace the default favicon.ico with another file. Also, any arbitrary valid name will work for the name file, make sure the extension, `type` and the actual file is correctly an .ico file. – Tommy Aria Pradana Nov 24 '21 at 20:20
2

It should also be possible to create a controller that returns the ico file and register the route /favicon.ico to point to that controller.

Carles Company
  • 7,118
  • 5
  • 49
  • 75
2

All you need to do is to add app.UseStaticFiles(); in your startup.cs -> public void Configure(IApplicationBuilder app, IHostingEnvironment env).

ASP.net core provides an excellent way to get static files. That is using the wwwroot folder. Please read Static files in ASP.NET Core.

Using the <Link /> is not a very good idea. Why would someone add the link tag on each HTML or cshtml for the favicon.ico?

Ripal Barot
  • 687
  • 8
  • 16
0

Use this instead of just the favicon.ico which tends to search in for the fav icon file 

> <link rel="ICON" 
> href="@System.IO.Path.Combine(Request.PhysicalApplicationPath,
> "favicon.ico")" />

Use the requested path and combine with the fav icon file so that it gets the accurate address which its search for

Using this solved the Fav.icon error which is raised always on Application_Error

Tribhuvan Patel
  • 1
0

Found that in .Net Core, placing the favicon.ico in /lib rather than wwwroot fixes the issue

Dimitris Kouris
  • 1