question

SaeedPooladzadeh-4680 avatar image
0 Votes"
SaeedPooladzadeh-4680 asked AgaveJoe edited

problem with favicon on the blazor site

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

dotnet-aspnet-core-blazordotnet-aspnet-core-mvcdotnet-aspnet-core-webapidotnet-aspnet-mvc
bla.png (16.5 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.


Did you include the correct <link> element into your HTML? To check the final HTML, you can use the <F12> tool in Edge browser.


0 Votes 0 ·
SaeedPooladzadeh-4680 avatar image
0 Votes"
SaeedPooladzadeh-4680 answered

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



bla1.png (87.4 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

AgaveJoe avatar image
0 Votes"
AgaveJoe answered AgaveJoe edited

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.

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

SaeedPooladzadeh-4680 avatar image
0 Votes"
SaeedPooladzadeh-4680 answered AgaveJoe edited

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?





bla3.png (11.9 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

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

This is ridiculous! You're following a tutorial! The community has no idea you're following a tutorial unless you tell us!

The links you've provided contains href paths to ico files that do not exist in screenshot. Please follow Viorel-1's advice and check the network view in the browser's dev tools (F12) for 404 (not found) errors. A 404 error means the browser requested a file path that does not exist on the host. Either fix the href in the link element(s) so the href point to the correct file location or upload the files to wwwroot. Did you follow the links in the tutorial to generate the ico files?

Perhaps you do not fully understand relative paths in web applications?

HTML File Paths


0 Votes 0 ·