在ASP.NET MVC中提供favicon.ico

260

如何在ASP.NET MVC中提供favicon.ico的最终/最佳建议是什么?

我目前正在执行以下操作:

  • 在我的RegisterRoutes方法非常开始处添加一个条目:

routes.IgnoreRoute("favicon.ico");
  • 将favicon.ico放在我的应用程序根目录中(这也将是我的域的根目录)。

  • 我有两个问题:

    • 是否没有其他位置可以放置favicon.ico而不是在应用程序的根目录中。它与ContentControllers位于同一级别,这很糟糕。
    • 这个IgnoreRoute("favicon.ico")语句是否足够-或者我还应该像Phil Haack的博客文章中讨论的那样做以下操作? 我不知道是否曾经在除根目录之外的任何目录中看到过对favicon.ico的请求 - 这将使此操作不必要(但了解如何执行此操作很好)。

      routes.IgnoreRoute("{*favicon}", new {favicon=@"(.*/)?favicon.ico(/.*)?"});
      

    4
    你的正则表达式应该是'.'来匹配favicon.ico中的点,而不仅仅是'.'。 - NathanAldenSr
    1
    这是我使用的代码(它考虑了@NathanAldenSr的建议,支持正斜杠和反斜杠,并允许favicon.png文件):routes.IgnoreRoute("{*favicon}", new { favicon = @"(.*[/\\])?favicon\.((ico)|(png))(/.*)?" }); - BrainSlugs83
    @BrainSlugs83 - 你的解决方案为我补全了缺失的部分,就是反斜线...这里提供一个.NET vNext版本(beta-5)。routes.MapRoute("IgnoreFavicon", "{*favicon}", new { favicon = @"(.*[/\\])?favicon\.((ico)|(png))(/.*)?" }); - Rentering.com
    更正,vNext忽略路由 routes.MapRoute("Ingore", "{*favicon}", new { }, new { favicon = @"(.*[/\\])?favicon\.((ico)|(png))(/.*)?" }); 注意new {} - Rentering.com
    9个回答

    235

    我同意Chris的答案,但是考虑到这是一个特定的ASP.NET MVC问题,最好使用Razor语法:

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

    或者传统地说

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

    与其

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

    3
    没错。我的回答是在阐述“通用”的版本(HTML),所以任何人都可以根据自己选择的框架/语言进行修改 :) - Chris
    2
    @Diego - 是的,rel="SHORTCUT ICON"是Internet Explorer使用的非标准实现。在W3C标准中,空格是分隔符(请参见https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)。在除Internet Explorer之外的浏览器中,正确的语法是<link rel="icon" href="path/to/favicon.ico">-有关更多信息,请参见http://www.jonathantneal.com/blog/understand-the-favicon/。显然,您可以像上面那样使用Razor或Web Forms语法来指定图标的路径。 - pwdst
    3
    使用MVC 4时,在这种情况下您将不需要Url.Content,因为它会自动处理,您只需使用;<link rel="icon" href="~/content/favicon.ico"/> - Stuart Hallows

    209

    将favicon.ico放在您域名的根目录中只会影响IE5,如果我没记错的话。对于更现代的浏览器,您应该能够包含一个链接标签来指向另一个目录:

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

    除IE外,您还可以为其他浏览器使用非ico文件。在这种情况下,您可以使用以下条件语句将PNG文件提供给Firefox等其他浏览器,提供ICO文件给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]-->
    

    25
    您需要使用@Url.Content生成链接,以便在所有环境中都能正常工作。请参阅AlexC的回复。 - RickAndMSFT
    5
    可以的,对于ASP.NET而言是真的。我的回答展示了“通用”的版本(普通HTML),因此任何人都可以修改以适应他们选择的框架或语言 :) - Chris
    需要注意的是,IE10不支持条件注释,因此对于使用该浏览器的用户,这将无法起作用。解决方案是将您的网站图标添加到站点的根目录中,如果IE10在任何地方都找不到网站图标的链接,它将自动选择。 - Kevin Babcock
    2
    IE11可以识别PNG格式的网站图标,无需使用条件语句。你可以查看这篇好文章:http://www.jonathantneal.com/blog/understand-the-favicon/ - QMaster
    谢谢,伙计!底部的部分真的帮助我处理PNG,只需要放在页面、主页或布局的顶部即可。 - Alper

    24

    1) 您可以将网站图标放置在任何位置,并将此标签添加到页面头部。

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

    尽管某些浏览器默认会从 /favicon.ico 获取站点图标,但你应该使用 IgnoreRoute 配置来避免此类请求被处理。

    2) 如果浏览器从其他目录请求站点图标,将会得到 404 错误,这是可以接受的。如果你在主页面中包含了答案 1 中的链接标签,浏览器将获取所需的站点图标。


    2
    浏览器会在您收藏网站时查找.ico文件,因此这并没有帮助。但我想知道浏览器是否记得这一点。我只知道在Fiddler中有时会看到大量图标被检索。也许那是Google工具栏? - Simon_Weaver
    我认为你是对的,书签图标有时候只能起作用,我从来没有弄清楚为什么,也许就是这种情况。 - Eduardo Campañó

    7
    我认为应将favicon.ico放在根目录中,因为它就是属于那里的。
    如果您想提供不同的图标,请将其放入控制器中。您可以这样做。如果不需要,请将其保留在根目录中。

    1
    我同意。它在根文件夹中,不应该出现在其他任何地方...如果在根文件夹中,无需使用HTML标签来设置网站图标。适用于所有常见的浏览器... - Vinz
    起初,这对我来说似乎完全是胡说八道,但显然无法避免,我们的日志记录显示来自不同用户代理的404错误。 - Michiel Cornille

    5

    以上方法都对我无效。最终,我通过将favicon.ico重命名为myicon.ico,并在头部引用它来解决了这个问题。<link rel="icon" href="~/myicon.ico" type="image/x-icon" />


    此外,在.NET 6和Blazor Server上也可以实现这一点。我不知道为什么ASP.NET不允许我们用其他文件替换默认的favicon.ico。另外,任何有效的名称都可以用作文件名,确保扩展名、类型和实际文件正确地是.ico文件。 - Tommy Aria Pradana

    2

    同时,还可以创建一个控制器来返回ico文件,并注册路由/favicon.ico以指向该控制器。


    2
    您只需要在startup.cs中添加app.UseStaticFiles();即可。ASP.net core提供了一个很好的获取静态文件的方法,即使用wwwroot文件夹。请参阅ASP.NET Core中的静态文件。使用<Link />不是一个很好的想法。为什么有人要在每个HTML或cshtml上添加链接标签来获得favicon.ico?

    0
    发现在 .Net Core 中,将 favicon.ico 放入 /lib 而非 wwwroot 可以解决这个问题。

    0
    使用这个替代仅搜索收藏夹图标文件的favicon.ico。
    > <link rel="ICON" 
    > href="@System.IO.Path.Combine(Request.PhysicalApplicationPath,
    > "favicon.ico")" />
    

    使用请求的路径并结合收藏图标文件,以便获得准确的地址,从而找到它所寻找的内容。
    使用这种方法解决了在Application_Error中经常出现的Fav.icon错误。

    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文,
    原文链接