Add a favicon in ASP.NET Core MVC

The short answer

In an ASP.NET Core MVC project, a favicon is a static file. Put the icon files in the wwwroot folder, make sure static file serving is enabled in Program.cs, and add link tags to the head of the shared layout view, usually Views/Shared/_Layout.cshtml. The standard MVC project template already includes a favicon.ico in wwwroot. In many cases the job is just replacing that file with your own icon and adding a reference for an SVG version.

This article covers the files involved: a scalable SVG icon made from your vector logo, a raster ICO or PNG fallback, and the markup that tells browsers where to find them.

Step 1: Place the icon files in wwwroot

ASP.NET Core serves files from wwwroot, the web root, by default. A file at wwwroot/favicon.svg is available at the root of the site as /favicon.svg. Many browsers request /favicon.ico from the site root automatically even when no link tag exists. Keeping a favicon.ico at the top of wwwroot covers that default request.

wwwroot/
  favicon.ico
  favicon.svg
  apple-touch-icon.png

Step 2: Confirm static files are enabled

The MVC template enables static file serving in Program.cs. Depending on the .NET version, it does this with app.UseStaticFiles() or with app.MapStaticAssets() in newer templates. If you started from an empty project, add one of these calls, or wwwroot files will not be served. The default content type mappings already cover .ico and .svg, so these formats normally need no extra MIME configuration.

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllersWithViews();

var app = builder.Build();

app.UseStaticFiles();
app.UseRouting();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

Step 3: Reference the icons in the layout

Add the link tags inside the head element of Views/Shared/_Layout.cshtml so every view that uses the layout gets them. The tilde prefix resolves to the application's base path. This matters if the app is hosted under a sub-path instead of the domain root. The asp-append-version attribute, supported by the link tag helper, appends a hash of the file's contents to the address. After you replace an icon, browsers then fetch the new file instead of a cached copy.

<head>
    <meta charset="utf-8" />
    <title>@ViewData["Title"]</title>
    <link rel="icon" href="~/favicon.ico" sizes="any" asp-append-version="true" />
    <link rel="icon" href="~/favicon.svg" type="image/svg+xml" asp-append-version="true" />
    <link rel="apple-touch-icon" href="~/apple-touch-icon.png" asp-append-version="true" />
</head>

Browsers that support SVG icons use the SVG version, and the others fall back to the ICO. The apple-touch-icon entry is a PNG because home-screen icons on Apple devices use raster images rather than SVG. Browser support for SVG favicons varies by browser and version. The materials for this article contained no current support data, so check your target browsers before you drop the raster fallback.

Turning a vector logo into a favicon

An SVG favicon scales without losing sharpness only if it contains real vector shapes. A file ending in .svg is not proof of that. Some SVG files just wrap an embedded PNG or JPEG in an image element, and those scale no better than the raster image inside them. Open the file in a text editor or a vector application. Path, circle, rect or polygon elements indicate vector artwork. An image element pointing to embedded base64 data, or to an external bitmap, indicates raster content inside an SVG wrapper. An exported preview image is not editable artwork either, even if it came from a vector source file.

• Simplify the mark: a full logo with a wordmark usually becomes unreadable at tab-icon size, so a symbol, monogram or single letterform tends to work better.
• Convert text to outlines: a favicon should not depend on a font that may be missing on the viewer's system.
• Remove hidden layers, editor metadata and unused definitions to keep the file small.
• Set a square viewBox so the icon is not stretched or cropped in the browser tab.
• Check contrast against both light and dark browser themes; an SVG favicon can include a prefers-color-scheme media query in an embedded style block to swap colors.

Export the ICO and PNG fallbacks from the same simplified vector source, then review them at actual size. Small raster renders can blur fine details that look fine in the SVG.

Rights to the logo artwork

If the favicon is based on a logo you did not create, being able to download the file does not mean you may change or publish it. Permission to download, permission to modify the artwork, the license for any font used in it, and the right to use the trademark are separate questions. Confirm with the owner or the licensing terms before you crop, recolor or simplify someone else's mark for a site icon.

If the new icon does not show up

• Browsers cache favicons aggressively; use asp-append-version or test in a private window.
• Confirm the file loads directly at its path. A 404 usually means the file is outside wwwroot or static files are not enabled.
• Check that the link tags are in the layout the page actually uses, not in a different or unused layout.
• If the SVG renders blank, open it on its own in a browser and check for an embedded raster, a missing viewBox or an external reference that fails to load.

Gaps in the available evidence

No subject-specific evidence was supplied for this article. It contains no browser support tables, recommended pixel sizes or framework version dates. The steps above rest on general, documented ASP.NET Core behavior and common favicon practice. Check exact icon dimensions and current SVG favicon support against current browser and framework documentation for your target platforms.