Add favicon into web app

How to add favicons to your ASP.NET applications

Learning Objectives

Generate favicons for different devices online.
Add favicon or shortcut icon on ASP.Net Website.

Prerequisites

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.
Favicon Generator for perfect icons on all browsers

Currently supported browsers, platforms, and technologies.

Step 1: Download any royalty-free images from here

Beautiful Free Images & Pictures | Unsplash

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>
<html>
<head>
    <!-- Other head elements --> 
    @await Html.PartialAsync("_Favicons")
</head>
<body>
</body>
</html>

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. Please provide your feedback in the comment section.

Follow me on

C# Publication, LinkedIn, Twitter, Dev.to, Pinterest, Substack, Wix.

Blog