favicon.ico的概述

Posted 2023-04-12

参考技术A

中文名称是网站头像。在我们的网站建设中，为网站打造一个契合网站主题的个性化标志则是必需的，这直接关系到能否成功地塑造网站的品牌。这从某些角度看仍在网站推广的范畴之内，而欲取得成功，不仅包括良好的页面设计、令人印象深刻的网站Logo，也包括favicon。
favicon.ico图标是网站的缩略标志，可以显示在浏览器标签、地址栏左边和收藏夹，是展示网站个性的缩略logo标志，也可以说是网站头像，如果要让网站看起来更专业、更美、更有个性，favicon.ico是必不可少的，所以你在本站使用ICO图标转换工具就可以轻松达到你的要求 。

从特定的技术角度看，favicon也并不只是仅仅让网站给人更专业的观感，也可以在一定程度上减轻服务器的流量带宽占用，一般为了提高网站的可用性，我们都会为自己的网站创建一个自定义的404错误文件，在这种情况下，如果网站没有相应的favicon.ico文件，每当有用户收藏网站/网页时， Web服务器都会调用这个自定义的404文件，并在网站的错误日志中记录。这显然是应该予以避免的。

在 ASP.NET MVC 中服务 favicon.ico

【中文标题】在 ASP.NET MVC 中服务 favicon.ico

【英文标题】：Serving favicon.ico in ASP.NET MVC

【发布时间】：2010-10-03 23:41:21

【问题描述】：

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

我目前正在做以下事情：

在我的 RegisterRoutes 方法的一开始添加一个条目：

routes.IgnoreRoute("favicon.ico");

将 favicon.ico 放在我的应用程序的根目录中（这也将是我的域的根目录）。

我有两个问题：

除了我的应用程序的根目录之外，没有办法将 favicon.ico 放在其他地方。与Content 和Controllers 处于同一级别真是令人讨厌。

这 IgnoreRoute("favicon.ico") 声明是否足够 - 或者我是否也应该按照 a blog post from Phil Haack 中的讨论执行以下操作。我不知道曾经在根目录以外的任何目录中看到过对 favicon.ico 的请求 - 这将使得这变得不必要（但知道如何去做很好）。

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

【问题讨论】：

你的正则表达式应该是 '\.'对于 favicon.ico 中的点，而不仅仅是 '.'。

这是我使用的（它考虑了@NathanAldenSr 的建议，支持正斜杠和反斜杠，还允许使用 favicon.png 文件）：routes.IgnoreRoute("*favicon", new favicon = @"(.*[/\\])?favicon\.((ico)|(png))(/.*)?" );

@BrainSlugs83 - 您的解决方案为我添加了缺少的部分，即斜线......这是一个 .NET vNext 版本（beta-5）。 routes.MapRoute("IgnoreFavicon", "*favicon", new favicon = @"(.*[/\\])?favicon\.((ico)|(png))(/.*)?" );

更正，vNext 忽略路线routes.MapRoute("Ingore", "*favicon", new , new favicon = @"(.*[/\\])?favicon\.((ico)|(png))(/.*)?" ); 注意new ，

【参考方案1】：

我同意 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"/>

【讨论】：

是的。我的回答是说明“通用”版本（HTML），所以任何人都可以修改以适合他们选择的框架/语言:)

@Diego - 是的，rel="SHORTCUT ICON" 是 Internet Explorer 使用的非标准实现。空格是 W3C 标准中的分隔符（请参阅developer.mozilla.org/en-US/docs/Web/HTML/Element/link）。在 Internet Explorer 以外的浏览器中，正确的语法是 - 请参阅 jonathantneal.com/blog/understand-the-favicon 了解更多信息。显然，您可以使用 Razor 或 Web Forms 语法作为上述图标的路径。

使用 MVC 4，在这种情况下您将不需要 Url.Content，因为它将自动处理，您可以使用；

【参考方案2】：

将 favicon.ico 放在域的根目录中只会真正影响 IE5、IIRC。对于更现代的浏览器，您应该能够包含一个链接标记以指向另一个目录：

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

您还可以将非 ico 文件用于 IE 以外的浏览器，为此我可能会使用以下条件语句将 PNG 提供给 FF 等，并将 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]-->

【讨论】：

您需要使用@Url.Content 来生成链接，以便它适用于所有环境。查看 AlexC 的回复

正确，对于 ASP.NET。我的回答说明了“通用”版本（纯 HTML），因此任何人都可以修改以适合他们选择的框架/语言:)

请注意，IE10 不支持条件 cmets，这对使用该浏览器的用户不起作用。一个解决方案是将您的网站图标添加到您网站的根目录，如果 IE10 在任何地方都找不到网站图标的链接，它会自动选择该目录。

IE11 理解PNG favicon，不需要条件语句。你应该看到这篇好文章：jonathantneal.com/blog/understand-the-favicon

谢谢老兄！底部确实有助于我使用 png，它只需要位于页面、母版页或布局的顶部。

【参考方案3】：

1) 您可以将您的网站图标放在您想要的位置，并将此标签添加到您的页面标题

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

虽然有些浏览器默认会尝试从 /favicon.ico 获取 favicon，所以你应该使用 IgnoreRoute。

2) 如果浏览器在另一个目录中请求网站图标，它将得到一个 404 错误，这很好，如果您在母版页的答案 1 中有链接标签，浏览器将获得您想要的网站图标。

【讨论】：

如果您为网站添加书签，浏览器会去寻找 .ico 文件 - 所以这无济于事。但我想知道浏览器是否记得。我只知道在 Fiddler 中，有时我会看到一大堆图标被检索。也许那是谷歌工具栏？

我认为你是对的，书签图标有时只能工作，我一直不明白为什么，也许是这样

【参考方案4】：

我认为 favicon.ico 应该在根文件夹中。它只属于那里。

如果你想服务不同的图标 - 把它放到控制器中。 你可以这样做。如果没有 - 将其留在根文件夹中。

【讨论】：

我同意。它在根文件夹中，不应该在其他任何地方...如果网站图标位于根文件夹中，则不需要 HTML 标记。适用于所有常见浏览器...

起初，这对我来说似乎是绝对的牛市，但显然没有办法绕过它，我们的日志不断显示来自不同用户代理的 404 错误。

【参考方案5】：

以上都不适合我。我终于解决了这个问题，将 favicon.ico 重命名为 myicon.ico，并在头部引用 <link rel="icon" href="~/myicon.ico" type="image/x-icon" />

【讨论】：

除此之外，在 .NET 6 和 Blazor Server 上这也有效。我不知道为什么 ASP.NET 不允许我们用另一个文件替换默认的 favicon.ico。此外，任何有效的名称都适用于名称文件，请确保扩展名 type 和实际文件是正确的 .ico 文件。

【参考方案6】：

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

【参考方案7】：

您需要做的就是在您的 startup.cs 中添加 app.UseStaticFiles(); -> public void Configure(IApplicationBuilder app, IHostingEnvironment env)。

ASP.net 核心提供了一种获取静态文件的绝佳方式。那是使用 wwwroot 文件夹。请阅读Static files in ASP.NET Core。

使用<Link /> 不是一个好主意。为什么有人会在 favicon.ico 的每个 HTML 或 cshtml 上添加链接标签？

【参考方案8】：

使用它而不是 favicon.ico，它倾向于搜索收藏图标文件

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

使用请求的路径并与收藏图标文件结合，以便获得其搜索的准确地址

使用它解决了总是在 Application_Error 上引发的 Fav.icon 错误

【参考方案9】：

发现在 .Net Core 中，将 favicon.ico 放在 /lib 而不是 wwwroot 可以解决问题