Add favicon — ASP.Net
C# CONCEPTS
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
The ultimate favicon generator. Design your icons platform per platform and make them look great everywhere. Including…realfavicongenerator.net
Currently supported browsers, platforms, and technologies.
Step 1: Download any royalty-free images from here
Beautiful Free Images & Pictures | Unsplash
Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock…unsplash.com
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.