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.
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 16x16 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:
1 | <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.
Hi! Did you find this useful or interesting? I have an email list coming soon, but in the meantime, if you ready anything you fancy chatting about, I would love to hear from you. You can contact me here or at stephen ‘at’ logicalmoon.com