Create Favicon Assets for your Website within minutes

Creating the perfect favicon can be very tedious and sometimes may not be worth the time you invest into it. Luckily there are websites that can be used to generate the favicons for you since there are more than just the regular favicon icon you need, you also need to specify different resolutions for different browsers and systems. For example, browsers will look at the manifest and use the manifest decide which image to load as the favicon. This is important for tablets and mobile phone browsers since the images usually need to be a more detailed image.

Prerequisite

• An asset you want your favicon to be based on 

Navigate to https://realfavicongenerator.net/ and press the select your favicon image button, find the asset you want to use and select it. Follow the steps carefully as presented by the website since you can customise it for your exact use case.

Once you have gone through all the options at the bottom you will be able to generate the favicons, press the button, and then wait until the assets have been generated. You should see a similar page as the following

Download the favicon package, open the contents and copy the contents into your website public path. This should mean that these assets are accessible from your website once published, if they aren't you may need to ensure that they get rendered. For static websites, this will work out the box but with express for example you will need to be sure that they're put in a folder that is using the express.static middleware to service directories. 

Once the assets are in the public path of the folder you are now ready to add the html that tells the browsers to use the favicon(s) you have specified. 

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=A05zQYz9Eb">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=A05zQYz9Eb">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=A05zQYz9Eb">
<link rel="manifest" href="/site.webmanifest?v=A05zQYz9Eb">
<link rel="mask-icon" href="/safari-pinned-tab.svg?v=A05zQYz9Eb" color="#5bbad5">
<link rel="shortcut icon" href="/favicon.ico?v=A05zQYz9Eb">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

The above is an example but yours should be similar. Paste the html that was generated for you from the website into the head, you site should now have a favicon that differs based on the browser/device.