Fancy having a nice fav icon on your web application as that finishing touch? It’s easier than you think.
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.
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.
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:
<link rel="icon" href="@Url.Content("~/Content/favicon.ico")" />
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.
Written by Stephen Moon
email: stephen at logicalmoon.com