Add a favicon in ASP.NET

The short answer

To add a favicon in ASP.NET, put the icon files where the app serves static content and reference them with link elements in the shared layout. In ASP.NET Core, that folder is wwwroot and the layout is usually _Layout.cshtml (MVC and Razor Pages), App.razor (Blazor Web App) or index.html (standalone Blazor WebAssembly). In classic ASP.NET on .NET Framework, the files usually go in the project root and the link goes in Site.Master or Views/Shared/_Layout.cshtml.

A reliable setup has three parts: a favicon.ico at the site root for browsers and tools that request it automatically, an SVG favicon for browsers that support vector icons, and a PNG apple-touch-icon for iOS home-screen shortcuts. The SVG is the part most closely tied to your vector logo, so it is worth preparing carefully.

Which files you need

File | Format | Purpose

favicon.ico | ICO (raster, can hold several sizes) | Fallback many browsers request at the site root even with no link tag

favicon.svg | SVG (vector) | Scales cleanly in browsers that support SVG favicons and can adapt to dark mode

apple-touch-icon.png | PNG (raster) | Icon used when the site is saved to an iOS home screen

The ICO and PNG files are raster exports. Only the SVG keeps vector data, and only if the source artwork was vector to begin with.

ASP.NET Core: MVC, Razor Pages and Blazor

Copy the icon files into wwwroot. Static file serving must be enabled. New project templates already do this with app.UseStaticFiles() or, in .NET 9 and later templates, app.MapStaticAssets(). The default content-type mapping in ASP.NET Core includes .ico, .svg and .png, so no extra configuration is normally needed.

Add the link elements inside the head of the shared layout. In MVC or Razor Pages, that is Views/Shared/_Layout.cshtml or Pages/Shared/_Layout.cshtml:

<head>
    <link rel="icon" href="~/favicon.ico" sizes="any" />
    <link rel="icon" href="~/favicon.svg" type="image/svg+xml" asp-append-version="true" />
    <link rel="apple-touch-icon" href="~/apple-touch-icon.png" />
</head>

The tilde resolves to the app's base path, so the links still work if the site runs under a virtual directory. The asp-append-version attribute adds a hash of the file to the URL. When you replace the icon, browsers fetch the new version instead of keeping an old cached one. This is useful because favicons are cached aggressively.

In a Blazor Web App, put the same tags in the head of Components/App.razor. In a standalone Blazor WebAssembly project, put them in wwwroot/index.html. Use plain relative paths there, because tag helpers and the tilde syntax are not processed in a static HTML file:

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

Project templates often include a placeholder favicon. Replace that file, or remove its existing link tag, so two icons don't compete.

Classic ASP.NET on .NET Framework (Web Forms and MVC 5)

Place the files in the project root and set them to be included in the publish output. In Web Forms, add the links to the head of Site.Master. In MVC 5, add them to Views/Shared/_Layout.cshtml. Use the tilde with Url.Content in Razor, or ResolveUrl in Web Forms, so the paths respect the application root:

<link rel="icon" href="@Url.Content("~/favicon.ico")" sizes="any" />
<link rel="icon" href="@Url.Content("~/favicon.svg")" type="image/svg+xml" />

IIS has to serve the SVG with the image/svg+xml content type. Recent IIS versions map .svg by default. If the SVG icon returns a 404 or the wrong type on an older server, add a MIME map in web.config:

<system.webServer>
  <staticContent>
    <remove fileExtension=".svg" />
    <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
  </staticContent>
</system.webServer>

Preparing the SVG favicon from a vector logo

A .svg extension does not guarantee vector artwork. An SVG can simply wrap an embedded PNG or JPEG. In that case it behaves like a raster image and gains none of the scaling benefit. Open the file in a vector editor or a text editor and check for path and shape elements. If you find an image element with embedded data instead, the file is not real vector artwork. Ask for the original source file or redraw the mark.

• Simplify for small sizes: a full logo with a wordmark becomes unreadable at tab size, so a symbol, monogram or single letterform usually works better.
• Convert text to outlines: favicons should not depend on fonts being installed, and outlined text avoids substitution.
• Use a square viewBox: keep the mark centered with a little padding so browsers don't crop or distort it.
• Strip editor metadata: export a plain or optimized SVG without editor-specific layers, comments or hidden objects.
• Avoid external references: linked images, external stylesheets and scripts are not appropriate in a favicon and may be ignored.

An SVG favicon can include a prefers-color-scheme media query in an internal style block. This lets a dark mark switch to a light one when the browser uses a dark theme, which is one practical advantage over ICO and PNG files:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) {
      path { fill: #ffffff; }
    }
  </style>
  <path d="..." />
</svg>

The xmlns value above is the standard SVG namespace identifier that every SVG file declares. It is not a link. Replace the path data with your own artwork.

Why you still need raster fallbacks

Browser support for SVG favicons is not universal. Safari, in particular, has historically lagged behind Chromium-based browsers and Firefox. Many crawlers, bookmark tools and older clients still look only for favicon.ico at the root. Keeping the ICO and the apple-touch-icon PNG means every client gets a usable icon. Browsers that understand SVG will use the vector version. No supporting evidence was supplied for this article, so check current browser documentation for the exact support status before relying on SVG alone.

Export the raster fallbacks from the same vector source so all versions match. Small raster sizes may need manual pixel adjustments, because automatic downscaling of fine detail often blurs it.

Rights to the logo

Being able to download a logo file does not give you permission to modify it, crop it into an icon or use it on a site. Turning a logo into a favicon usually means simplifying or reworking the artwork. Confirm you have rights to the artwork, any typeface in it and the trademark. This matters most when the logo belongs to a client or a third party.

Troubleshooting checklist

• Old icon still showing: clear the browser cache or open a private window. In ASP.NET Core, use asp-append-version, or rename the file to force a refresh.
• Icon returns 404: confirm the file is in wwwroot (Core) or the project root (Framework), static files are enabled, and the file is included in the publish output.
• SVG ignored: check the type attribute is image/svg+xml, the server sends that content type, and the browser supports SVG favicons.
• Wrong icon appears: look for a leftover template favicon or a duplicate link tag in another layout or page.
• Icon looks blurry: the SVG may contain an embedded raster image instead of vector paths, or the artwork is too detailed for small sizes.

Gaps in this guidance

This article relies on general, documented ASP.NET behavior and common web practice. No project-specific evidence, tested measurements or current browser-support figures were provided. Exact template file names, default middleware calls and browser support change between releases. Confirm them against the documentation for your framework version.