I'm trying to add and set a favicon for my ASP.NET Core project.
When I set up an initial project that Visual Studio 2017 creates automatically, the favicon.ico file is just in the wwwroot directory and there is no setting for it.
So, I add favicon file into wwwroot directory, but the favicon does not show up in any browsers.
How can I set the favicon in ASP.NET Core so that it shows up?
wwwroot/index.html file has the link to favicon.
<link rel="icon" type="image/x-icon" href="favicon.ico">
is the code to add favicon to the website.
For .net core Single Page Application (SPA) project the favicon will be rendered from its own respective static file. For example if are using angular as client application there is index.html file inside src and in index.html you can link your favicon with following code
<link rel="icon" type="image/x-icon" href="favicon.ico">
Similarly, to set favicon in MVC project, you need to edit layout template which is normally inside View > Shared > _Layout.cshtml. You need to add <link rel="icon" type="image/x-icon" href="favicon.ico"> inside <head></head> tag. If you are using multiple layout then you need to edit other files as well.
If your favicon.ico file is in wwwroot folder and if you are still getting 404 error when browser try to get favicon.ico, make sure you have app.UseStaticFiles(); in your Startup.cs -> public void Configure(IApplicationBuilder app, IHostingEnvironment env).
Please read Static files in ASP.NET Core for detail.
If you add favicon.ico in wwwroot and not in any subfolder, you don't need to add the <link ... tag in your html or cshtml.
In _Layout.cshtml include,
<link rel="shortcut icon" href="//.../content/images/favicon.ico" />
I was recently trying to do similar in a .Net 7 Angular project and also was getting 404's despite trying everything above.
What worked for me was to put the file in the asset folder under Client App, and to specify in index.html
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
Similiarly in nav-menu.component.html I had a logo in nav-brand that I also put in assets and referenced as below.
<img src="../assets/logo.png" height="48" />
Server side, I had Identity scaffolded, and placed my images under wwwroot/Indentity/images. And then I referenced them as below in _Layout.cshtml.
<link rel="icon" type="image/x-icon" href="/Identity/images/favicon.ico" />
<img src="/Identity/images/logo.png" height="48" />
I do feel one should be capable of making it work with files in wwwroot, but it seems this work around is a fall back.
If you're serving up a Single Page Application (SPA) from .NET Core 2, sometimes the SPA will look under the SPA's static files folder.
The only way I could get the favicon to show up with my Angular app was to put the favicon and site.webmanifest in my app/assets folder.
For .NET Core 6, I found I had to make sure all of this was correct:
favicon.ico is 16x16 and stored in the root of the wwwroot folder of the app, with a CopyToOutputDirectory value of Never:
<Content Update="wwwroot\favicon.ico">
<CopyToOutputDirectory>Never</CopyToOutputDirectory>
</Content>
A link in the <head></head> tag of the Layout or page:
<link rel="bookmark icon" href="favicon.ico">
app.UseStaticFiles() is called BEFORE any middleware:
app.UseStaticFiles();
app.ApplicationServices?.GetService<IMyMiddleware>();
app.UseMiddleware<MyMiddleware>();
