Adding Fav Icons to your MVC 5 Application

Fancy having a nice fav icon on your web application as that finishing touch? It’s easier than you think.

The Fav Icon

The Fav Icon

Let’s assume you have an image in mind. If not, quickly Google something you can use.

Now we need to convert it and thanks to the magic of the web and the kindness of others, there is a fantastic web resource you can use here.

Click on Choose File, select the image, and then select the radio button entitled: Generate only 16×16 favicon.ico. Lastly, click on Create Favicon. Huzzah! You’ve made one. I said it was easy, didn’t I?

OK, now download the resulting file using the link next to you image.

The link you use to download your icon.

Link to use

That’s your icon so next let’s add it to your MVC project. We’re able to put it where we like, but I am going to add it to the Content directory.

The place where I store the fav icon.

Location of my fav icon

Lastly, we need to just let our master page (in Views > Shared > _layout.cshtm) know where to locate it. For this, we will use a little bit of Razor syntax to make sure we reference it correctly, so add this somewhere near the top:

Save, compile and run your project and all being well, it should be there in the tab of your browser.

If you don’t see it, try forcing a refresh or head back to the properties of your icon in the Content folder of Visual Studio, and make sure it is copied to the destination directory.

twittergoogle_plusredditpinteresttumblrmail

Written by Stephen Moon
email: stephen at logicalmoon.com
www: https://www.logicalmoon.com


Leave a Reply

Your email address will not be published. Required fields are marked *