4,815 questions
Blazor web app
create a my-logo.svg-file from your my-logo.png-file (1000 pixels x 1000 pixels or less)
copy it here:
<head>
...
<link rel="icon" href="images/my-logo.svg">
</head>
problem with favicon on the blazor site
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(124.80000000000001, 55.00000000000001%, 22%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3ESP%3C/text%3E%3C/svg%3E)
Saeed Pooladzadeh
241
Reputation points
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?
thanks
Developer technologies ASP.NET ASP.NET Core
Developer technologies .NET Blazor
1,673 questions
Developer technologies ASP.NET Other
3,598 questions
{count} votes
-
Viorel 122.6K Reputation points2022-11-24T11:30:58.437+00:00 Did you include the correct <link> element into your HTML? To check the final HTML, you can use the <F12> tool in Edge browser.
-
Saeed Pooladzadeh 241 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.
Sign in to comment
2 answers
Sort by: Most helpful
-
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(275.2, 46%, 36%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3ETK%3C/text%3E%3C/svg%3E)
Timo Kinnunen 126 Reputation points2023-05-29T18:17:49.37+00:00 -
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(169.60000000000002, 90%, 26%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EUO%3C/text%3E%3C/svg%3E)
Ugur Ozyildiz 0 Reputation points2024-03-13T07:55:02.9766667+00:00 Thank you, the problem is fixed.
Sign in to comment -
-
AgaveJoe 30,126 Reputation points2022-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.
-
Saeed Pooladzadeh 241 Reputation points
2022-11-24T13:51:46.737+00:00 As you can see favicon is in the wwwroot folder:
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? -
AgaveJoe 30,126 Reputation points
2022-11-24T14:20:06.403+00:00 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?
-
Ugur Ozyildiz 0 Reputation points
2024-03-13T07:53:20.5466667+00:00 Thank you, the problem is fixed.
-
Deleted
This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Sign in to comment -