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.
Top comments (0)