logoredraws.com

Set a favicon in Blazor

How to add or replace a favicon in a Blazor app: where the icon link goes for each hosting model, how to use an SVG logo safely, and which fallbacks to keep.

Published

Contents
  1. The short answer
  2. Where the icon link lives
  3. Adding an SVG favicon with fallbacks
  4. Why a new icon may not appear
  5. Preparing the logo artwork
  6. Rights to the artwork
  7. Evidence gaps

The short answer

Blazor has no favicon setting of its own. A Blazor favicon is the same HTML icon link any website uses. You place the icon file in the project's wwwroot folder and reference it with a link element in the page head. The work is finding the right head for your hosting model, then preparing a logo file that still reads clearly at a few pixels wide.

Blazor apps render one root HTML document. Its location depends on the template the project started from:

Project type | File that holds the head element
Blazor Web App (the unified template introduced with .NET 8) | Components/App.razor
Standalone Blazor WebAssembly | wwwroot/index.html
Older Blazor Server projects | Pages/_Host.cshtml, or Pages/_Layout.cshtml in some template versions

Recent templates already include an icon link that points to a favicon.png in wwwroot. Often the quickest fix is to replace that file with your own image under the same name, or to edit the existing link so it points to your new file. If you started from an empty or customized template, add the link inside the head element yourself.

Adding an SVG favicon with fallbacks

Copy the icon files into wwwroot. Then declare them in the head, putting the SVG first and raster versions after it:

<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />

Browsers that support SVG favicons can use the vector file and render it sharply at any size. Support is not uniform across browsers and versions, so the PNG fallback matters. Apple devices use the apple-touch-icon PNG for home-screen shortcuts, and they expect a raster image there. Some tools and older browsers also request favicon.ico from the site root by default. Placing an ICO file in wwwroot covers those requests.

Relative paths such as favicon.svg resolve against the base element that Blazor templates include in the head. If the app is hosted under a sub-path, keep the base value correct, or the icon request will point to the wrong location.

Why a new icon may not appear

Browsers cache favicons aggressively and often keep showing the old icon after a deployment. Try a hard refresh, a private window, or clearing site data. A version query string on the href can also force a fresh request. Check the browser's network panel to confirm the file is served without a 404 error. Make sure the server sends a suitable content type for SVG, since a wrong type can stop the icon from rendering.

Preparing the logo artwork

A favicon usually displays at 16 to 32 pixels, so a full logo rarely works unchanged. Wordmarks, taglines and fine strokes become unreadable at that size. A simplified mark, monogram or single symbol from the logo system usually works better. Keep the artwork square with a sensible viewBox. Remove hidden layers, editor metadata and unused definitions to keep the file small.

Check what is inside the SVG before relying on it. An .svg extension does not prove the file contains editable vector paths. Some SVG exports simply wrap an embedded PNG or JPEG. That kind of file will not scale cleanly and cannot be properly simplified. Open it in a vector editor, or look at the markup, to confirm the shapes are real paths rather than an embedded raster preview. Text set in a font should be converted to outlines. Otherwise it depends on fonts the visitor's browser may not have.

Rights to the artwork

Using your own organization's logo is straightforward. If the mark comes from a client, a download site or a third-party brand, being able to download the file does not mean you may modify it or use it as a site icon. Cropping a logo to a symbol, redrawing it or changing its colors can conflict with brand guidelines, font licenses or trademark rules. Confirm those permissions with the owner first.

Evidence gaps

No project-specific evidence was supplied for this article: no target .NET version, hosting setup, browser support data or logo files. The file locations above reflect the standard Blazor templates and may differ in customized projects. Check browser support for SVG favicons against current compatibility data before dropping raster fallbacks.