logoredraws.com

How to Add a Favicon to an MVC Application

Add a favicon to an ASP.NET MVC app: prepare SVG and ICO artwork from your logo, place the files, reference them in the layout, and verify the result.

Published

Contents
  1. Key terms
  2. Step 1: Prepare favicon artwork from the logo
  3. Step 2: Place the files in the project
  4. Step 3: Reference the icon in the shared layout
  5. Step 4: Verify the result
  6. Gaps to check for your project

To add a favicon to an MVC application, put the icon files in the folder your app serves as static content, then reference them with link tags in the shared layout view so every page inherits them. In ASP.NET Core MVC, that folder is wwwroot and the layout is usually Views/Shared/_Layout.cshtml. In classic ASP.NET MVC on the .NET Framework, the files usually go in the project root and the layout is also Views/Shared/_Layout.cshtml. The rest of this guide covers how to prepare the logo artwork so the icon stays legible, and how to confirm the browser is actually loading it.

Key terms

  • Favicon: the small icon a browser shows in tabs, bookmarks and history for a site.
  • SVG (Scalable Vector Graphics): a text-based image format that describes shapes as geometry, so it scales without pixelation. Modern browsers can use an SVG file directly as a favicon.
  • ICO: a container format that can hold several raster images at different sizes in one file. It is the long-standing favicon format and works as a fallback where SVG is not supported.
  • Path: a vector shape defined by points and curves. A favicon SVG should ideally consist of simple filled paths.
  • viewBox: the SVG attribute that sets the coordinate space of the drawing. A square viewBox keeps the icon from being distorted or cropped in a square slot.
  • Outlined text: lettering converted from live font characters into paths, so it renders the same way without the font installed.

A full logo rarely works at favicon scale. Fine details, thin strokes and small wordmarks blur together in a tab. Use the brand mark, a monogram or a simplified version of the symbol instead, and design it to read clearly as a small square.

  • Start from the master vector file of the logo, not a screenshot or exported raster image.
  • Crop to the symbol or initial that identifies the brand, and place it on a square artboard. In the exported file, the artboard becomes the square viewBox.
  • Convert any text to outlines so the icon does not depend on a font.
  • Expand strokes into filled shapes if the editor allows it. This keeps line weights predictable when the icon is scaled down.
  • Remove hidden layers, unused swatches, editor metadata and embedded images before export.
  • Check contrast against both light and dark browser themes. A transparent background with a dark mark can disappear on a dark tab bar.

Open the exported SVG in a text editor before using it. A file ending in .svg is not proof that it contains only vector paths, because SVG files can embed raster images or reference external resources. If you find an embedded image element or base64 data, go back to the source artwork and rebuild those parts as paths. A file extension also says nothing about whether you have permission to use the logo. Confirm usage rights before deploying third-party or client artwork.

An SVG favicon can include a CSS media query for prefers-color-scheme inside the file to switch colors in dark mode. Treat this as an optional enhancement. Browser handling of styles inside favicon SVGs varies, so the default colors should already work in both themes.

<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 path above is a placeholder square that only shows the structure. Replace it with the outlined geometry of your mark.

Then export an ICO fallback from the same artwork. Most vector editors and dedicated icon tools can produce a multi-size ICO file. Review each embedded size, because detail that reads well at a larger size may need simplifying at the smallest one. You can also export a larger PNG for Apple touch icon use if the site needs it. Check current platform guidance for the expected dimensions, since this guide does not specify them.

Step 2: Place the files in the project

In ASP.NET Core MVC, copy favicon.svg and favicon.ico into the wwwroot folder. New project templates often already include a default favicon.ico there. Replace that file rather than keeping two competing versions. Static files must be enabled in Program.cs. Templates include this by default, using app.UseStaticFiles() in older versions or app.MapStaticAssets() in ASP.NET Core 9 and later.

// Program.cs (ASP.NET Core)
var app = builder.Build();

app.UseStaticFiles();      // or app.MapStaticAssets(); in newer templates

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

app.Run();

In classic ASP.NET MVC, place the files in the root of the web project, next to Web.config, and make sure they are set to be included in the published output. If requests for favicon.ico reach your routing and return errors, add an ignore rule for that file in the route configuration.

// App_Start/RouteConfig.cs (classic ASP.NET MVC)
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.IgnoreRoute("favicon.ico");

Step 3: Reference the icon in the shared layout

Add link tags inside the head element of Views/Shared/_Layout.cshtml. List the ICO first and the SVG second. Browsers that support SVG favicons can use it, and others fall back to the ICO. The tilde resolves to the application root, which matters if the app is hosted under a virtual directory. In ASP.NET Core, asp-append-version adds a content hash to the URL, so browsers fetch the new file after you replace the icon.

<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" />
</head>

Remove the apple-touch-icon line if you did not create that file. In classic ASP.NET MVC, the asp-append-version tag helper is not available. Keep the tilde paths, and change the file name or add a query string manually when you update the icon. Also check other layouts, such as one used for an admin area, because views that use a different layout will not inherit these tags.

Step 4: Verify the result

  • Run the app and open the icon URL directly, for example the site root followed by /favicon.svg. The artwork should display rather than a 404 or an error page.
  • Open the browser developer tools, go to the Network tab, reload the page and confirm the favicon requests return status 200 with the expected content type.
  • View the page source and check that the link tags appear in the head with correctly resolved paths.
  • If the old icon still shows, test in a private window or clear the cache. Browsers cache favicons aggressively and may keep an old icon even after a normal refresh.
  • Check the tab in both light and dark browser themes, and look at it at actual size to judge legibility.
  • After deployment, repeat the direct-URL check on the live site to confirm the files were published.

Gaps to check for your project

This guide assumes ASP.NET MVC, the framework most often meant by the term. Other MVC frameworks follow the same pattern of a static file plus link tags in a shared template, but folder names and configuration differ. Confirm the details against your framework's documentation. No project-specific evidence was supplied, so exact icon dimensions, current browser support for SVG favicons, and version-specific template details should be checked against current official documentation before you finalize the artwork and markup.