logoredraws.com

Add a favicon in ASP.NET MVC

How to add a favicon to an ASP.NET MVC or ASP.NET Core MVC site: where the file goes, what to put in the layout, and how to prepare an SVG favicon with a fallback.

Published

Contents
  1. What a favicon is and why the markup matters
  2. Classic ASP.NET MVC (.NET Framework)
  3. ASP.NET Core MVC
  4. Using an SVG favicon
  5. Preparing the vector artwork
  6. Rights to the logo artwork
  7. When the favicon does not appear
  8. Limits of this guide

To add a favicon to an ASP.NET MVC site, put the icon file in the site's web root and reference it with link elements in the shared layout so every view gets it. In classic ASP.NET MVC on .NET Framework, the web root is the project root and the layout is usually Views/Shared/_Layout.cshtml. In ASP.NET Core MVC, static files live in wwwroot and are served by the static files middleware. If your logo exists as clean vector artwork, you can offer an SVG favicon to browsers that support it and keep an ICO file as a fallback.

What a favicon is and why the markup matters

A favicon is the small icon browsers show in tabs, bookmarks and history. Many browsers request favicon.ico from the site root even when the page has no icon markup, so a file in the root often appears without further work. Explicit link elements still matter because they let you choose the format, store the file in another folder, offer more than one version and control caching.

Classic ASP.NET MVC (.NET Framework)

  • 1. Add favicon.ico, and optionally favicon.svg, to the project root, next to Web.config.
  • 2. Make sure the files are included in the project and their Build Action is Content, so they are published.
  • 3. Open Views/Shared/_Layout.cshtml, or whichever layout your views use, and add the link elements inside the head element.
  • 4. Rebuild, publish, and check the icon in a fresh browser session, because browsers cache favicons aggressively.
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link rel="icon" href="@Url.Content("~/favicon.ico")" sizes="any" />
    <link rel="icon" href="@Url.Content("~/favicon.svg")" type="image/svg+xml" />
</head>

Url.Content resolves the tilde to the application root, so the path still works when the site runs in an IIS virtual directory instead of at the domain root. By default, MVC routing does not handle requests for files that exist on disk, so a favicon in place is served as a static file. When the file is missing, the request falls through to routing and may reach the controller pipeline. Some projects add an ignore rule so a missing icon returns a plain 404 instead.

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
    routes.IgnoreRoute("favicon.ico");

    // existing MapRoute calls follow
}

ASP.NET Core MVC

  • 1. Put the icon files in wwwroot. The default templates already include a favicon.ico there, which you can replace.
  • 2. Confirm that the app calls UseStaticFiles, or the equivalent static asset mapping in newer templates, before routing.
  • 3. Add the link elements to Views/Shared/_Layout.cshtml.
<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" />
</head>

Razor in ASP.NET Core resolves the tilde in href attributes, so Url.Content is not needed. The asp-append-version attribute adds a hash of the file's contents to the URL. When you replace the icon the hash changes, which stops browsers from showing a stale cached version.

Using an SVG favicon

An SVG favicon is one file that renders sharply at any size. The type attribute identifies it as SVG, and browsers that support SVG icons can pick it over the ICO. Support is not universal, and Safari has historically lagged other browsers here, so keep the ICO link as a fallback. Adding sizes="any" to the ICO link is a common way to stop some browsers from preferring the ICO when an SVG is also available. Browser behavior changes over time, so check current compatibility data rather than relying on any fixed list.

Preparing the vector artwork

A file ending in .svg is not necessarily vector artwork. Some SVG exports simply wrap a raster image, which appears in the markup as an image element containing embedded PNG or JPEG data. That kind of file gives you none of the scaling benefit and can be larger than a plain PNG. Open the file in a text editor or vector tool and check that the logo is built from path or shape elements before using it as a scalable favicon.

  • Simplify the mark: thin strokes, small text and fine detail disappear at tab size. A symbol or monogram usually reads better than a full lockup.
  • Use a square viewBox so the icon is not squashed or letterboxed.
  • Convert any text to outlines. A favicon cannot rely on the visitor having your brand font installed.
  • Remove editor metadata, hidden layers and unused definitions to keep the file small.
  • Optionally add a prefers-color-scheme media query inside the SVG so the icon stays visible on dark browser interfaces, where this is supported.
  • Preview the result at actual tab size on light and dark backgrounds before shipping.
<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="M4 4h24v24H4z" />
</svg>

The xmlns value in this example is the standard SVG namespace identifier, not a page to visit. The square path is a placeholder for your own logo mark.

File | Format | Role
favicon.ico | ICO, which can bundle several small raster sizes | Broad fallback and the file browsers request from the root by default
favicon.svg | SVG with vector paths | Scalable icon for browsers that support SVG favicons
apple-touch-icon.png | Square PNG | Optional home-screen icon on Apple devices, referenced with rel="apple-touch-icon"; check current platform guidance for the recommended size

Rights to the logo artwork

Being able to download a logo file does not mean you may modify it or use it as a site icon. Simplifying a mark, recoloring it for dark mode or outlining a licensed typeface all change the artwork, and the logo itself may be a registered trademark. Use artwork you own or are licensed to adapt, and confirm that the font license allows you to convert lettering to outlines for this purpose.

When the favicon does not appear

  • Caching: browsers hold favicons for a long time. Use a private window, clear the cache, or rely on asp-append-version in ASP.NET Core.
  • Path: request the icon file directly in the browser. If it returns a 404, the file is in the wrong folder or was not published.
  • MIME type: if the SVG downloads instead of rendering, the server may not be sending image/svg+xml. Older IIS configurations can be fixed with a mimeMap entry in web.config.
  • Layout: views that set Layout to null, or use a different layout, will not pick up markup added to _Layout.cshtml.
  • Raster SVG: if the SVG looks blurry, check whether it contains an embedded bitmap rather than vector paths.

Limits of this guide

No project-specific details were provided, such as the MVC version, hosting environment or logo files, so the steps above follow general ASP.NET conventions. Template details differ between framework versions, and favicon support differs between browsers and changes over time. Check your project's layout and startup code, and test the icon in the browsers your audience actually uses.