problem with favicon on the blazor site

Saeed Pooladzadeh 121 Reputation points
2022-11-24T11:20:58.617+00:00

Hello,

I have made a site in blazor server.
Why is my favicon not displayed on the site, while when I run it in VisualStudio, it is displayed without any problem?

263874-bla.png

thanks

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
2,854 questions
Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
890 questions
ASP.NET MVC
ASP.NET MVC
A Microsoft web application framework that implements the model-view-controller (MVC) design pattern.
744 questions

3 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Saeed Pooladzadeh 121 Reputation points
    2022-11-24T12:09:18.103+00:00

    Can you please explain about <link> element?
    You mean what should I do?

    I just replace the new favicon with the blazor default one.

    263924-bla1.png

  2. AgaveJoe 20,301 Reputation points
    2022-11-24T12:39:18.957+00:00

    Your responses are not clear.

    The browser looks for favicon.ico in the application root which is the wwwroot folder not wwwroot/site_icons.

    Did you added a link element or changed how the static file handler works?

    Also, you tagged this question as MVC and Web API but your question states this is a Blazor application.

  3. Saeed Pooladzadeh 121 Reputation points
    2022-11-24T13:51:46.737+00:00

    As you can see favicon is in the wwwroot folder:

    263898-bla3.png

    On this page:
    https://www.daveabrock.com/2020/11/08/blast-off-blazor-update-head/
    There is a content:

    Now, we can head over the RealFaviconGenerator site to upload our new icon. After adjusting any settings to our liking, it’ll give us a bunch of icons, which we’ll unzip to the root of our wwwroot directory.

    In index.html in the wwwroot directory, add the following inside the <head> tag: 

    <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon.png">  
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">  
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">  
<link rel="manifest" href="/site.webmanifest">  
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">  
<meta name="msapplication-TileColor" content="#da532c">  
<meta name="theme-color" content="#ffffff">

    Do you mean this?
    If not, can you explain?