In this post I will show how you can add favicons to your ASP.NET Core MVC application, using the site realfavicongenerator.net.
The days of being able to add a simple favicon.ico to the root of your new web app are long gone. There are so many different browsers, platforms and devices, each of which require slightly different sizes and semantics for their favicons, that figuring out what you actually need to implement can be overwhelming.
Luckily, realfavicongenerator.net does most of the hard work for you. All you need is an initial icon to work with, and it will generate all the image files, and even the markup, for you.
I'll walk through the process of creating a favicon and configuring your ASP.NET Core MVC application to serve it. I'll assume you're starting from an existing ASP.NET core application that uses a base layout view, _layout.cshtml, and is already configured to serve static files using the StaticFileMiddleware. I'll mostly stick to the defaults for favicons here, but the realfavicongenerator.net site does a great job of explaining all the favicon requirements and options, so feel free to play and find something that works best for you.
Thanks to @pbernard, author of RealFavIconGenerator, the instructions to add favicons to your ASP.NET Core application can now be found in the final step of on http://realfavicongenerator.net itself, so they're always to hand. Enjoy!
1. Design your favicon
Before you can create all the various required permutations, you'll first need to create your base favicon. This needs to be at least 70×70, but if possible, use a larger version that's at least 260×260. The generator works by scaling your image down to the appropriate sizes, so in order to generate the largest required favicons you need to start big.
For this post I'll be using a random image from pixabay, that I've exported (from the SVG) at 300×300:
2. Import your design into RealFaviconGenerator
Now we have an icon to work with, go to realfavicongenerator.net and upload your icon. Click on Select your Favicon picture at the top right of the page, upload your image, and wait for it to finish processing..
You will now be presented with a breakdown of all the decisions you need to make to support various browsers and devices.
Favicon for iOS
As explained on RealFaviconGenerator, iOS users can pin a site to their home screen, which will then use a version of your favicon as the link image. Generally favicons work well when they contain transparent regions, to give the icon some shape other than a square, but for iOS they have to be solid.
RealFaviconGenerator provides some suggestions with how to generate the appropriate icon here, allowing you to change the background colour to use for transparency, how much padding to add to your icon, whether to generate additional icons, and whether to use an alternate iOS specific image.
In my case, I chose the basic option of generating a new icon, but using a different background colour to avoid the default black fill it would otherwise have. You can see the before and after of this small change below:
Favicon for Android
Android Chrome has a similar feature to iOS whereby you can pin a website to your home screen. Android is much more flexible with regard to icon design, so in this case transparent icons can generally be used as-is.
As before however, there are a lot of customisations you can make such as adding a background, generating additional images, or using an android-specific image.
The one required field at this point is the name of your application, but I'd recommend adding a theme colour too - that way the Chrome tab-bar and task-switcher colour will change to your website's theme colour too:
Windows Metro
Next in the OS list are Windows 8 and 10. As with iOS and Android, you can pin a website to your desktop. You can choose the background colour for your tile and optionally replace then image with a white silhouette, which can work well if you have a complex image outline.
Again, you can choose to generate additional lesser used images, or replace the image completely on Windows.
Safari Pinned Tab
Safari 9 adds the concept of pinned tabs, which are represented by a small monochrome SVG icon. By default, RealFaviconGenerator generates a silhouette of your image, but it can also automatically generate a monochrome image by applying a threshold to your default image:
In my case, the threshold didn't quite produce a decent outline, so I uploaded an alternative image instead which would work better with the automatic thresholding:
Generator options
Now we're pretty much done, but there's still a bunch of options you can choose to optimise your favicons.
First of all, you can choose the path in your website that you are going to place your favicons. Given the number of icons that are generated, it can be tempting to place them in a subfolder of your application, but it's actually recommended to keep them in the root of your app.
You can choose to add a version string to the generated HTML links (recommended) and set the application name. Finally, you can choose the amount of compression and the scaling algorithms used, along with a preview of the effect on the final images. Generally you'll find you can compress pretty heavily, but choose what works for you.
Generate!
Once all your settings are specified, click the 'Generate' button and let RealFaviconGenerator do it's thing! You'll be given a zip file of all your icons, and a snippet of HTML to include in your website.
Note, in a recent update, RealFaviconGenerator reduced the number of favicons that are produced by default from 28 to 9. If you would like the higher-compatibility pack with additional files you can click on 'Get the old package'.
3. Add the favicons to your website.
We are going to be serving the favicons as static files, so we can add them inside the web-root folder of our ASP.NET Core application. By default, this is the wwwroot folder in your web project. Simply unzip your downloaded favicon package into this directory:
Next, we need to add the HTML snippet to the head element of our website. You can do this directly inside _Layout.cshtml if you wish, or you can take the route I favour and create a partial view to encapsulate your favicon links.
Add a new file inside the Views/Shared folder called _Favicons.cshtml and paste the generated favicon HTML snippet in:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#00ffff">
All that's left is to render the partial inside the head tag of _layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<!-- Other head elements -->
@await Html.PartialAsync("_Favicons")
</head>
<body>
<!-- Other body elements -->
</body>
</html>
And that's it! Now your site should have a great set of favicons, no matter which browser or device your users are on.
Summary
RealFaviconGenerator makes it very easy to generate all the favicons required to support modern browsers and devices, with optional high-compatibility for older browsers, following all the required guidelines. By following through the guidelines on the site, it is trivial to generate a compatible set of icons for your website.
Adding the icons to your site is simple, requiring a few lines of html, and pasting the downloaded pack into your webroot.
If you do use the site, consider donating to the creators, to ensure it stays as up-to-date and useful as ever!