Add favicon — ASP.Net


How to add favicons to your ASP.NET applications

Photo by on Unsplash

Learning Objectives

  1. Generate favicons for different devices online.

  2. Add favicon or shortcut icon on ASP.Net Website.


Install latest visual studio community edition.

Getting Started

What is a favicon?

The favicon, also identified as a shortcut icon, tiny icon, or website icon that browsers advertise next to a page’s title in a browser tab.

Serving the favicons as static files so that we can attach them to our ASP.NET application.

Generate Favicons

Go to the following website to generate favicons for various platforms.

Currently supported browsers, platforms, and technologies.

Step 1: Download any royalty-free images from here

Step 2: Upload

Upload the downloaded image as shown in the below screenshot

Step 3: Download

In the favicon package, add them to the web-root folder.

Step 4: Create a new file “_Favicons.cshtml”

Now patch the following favicon HTML code in:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest"><meta name="msapplication-TileColor" content="#da532c"><meta name="theme-color" content="#ffffff">

Step 5: Render partial view

Render it inside the head tag of _layout.cshtml

<!DOCTYPE html>
<!-- Other head elements --> 
    @await Html.PartialAsync("_Favicons")

That’s it! Now the website has a magnificent collection of favicons, no matter which browser or device.

Thank you for reading, and I hope you liked the article.

Stay tuned on C#

#Aspnetcore #UI #Aspnet #Csharp #Favicon

Recent Posts

See All

Design Pattern – Adapter

#Aspnetcore #AdapterDesignPattern #Csharp #DesignPatterns #Dotnet According to Gang of Four, the Adapter Pattern converts the interfaces of a class into interfaces that the client requires. In other w