Serve-favicon third party middleware

 Hello!. Welcome to another moment with me again to learn and code on this platform. Today, I am going to be talking about how to add favicons on your web applications. Basic knowledge in node js and express js is needed to go through this tutorial.

I know some people might be wondering what a favicon is.

I think let me show you what it is, since a picture speaks a thousand times better than words. Have you ever noticed a little thumbnail image beside the title at the tab of a webpage ?

Did you see that!. That’s a favicon. As you can see, the one above is for medium.com website and that of express website.

I mentioned earlier that serve-favicon is a third-party middleware, meaning it must be installed before usage.

To install this middleware or module, navigate to your project’s directory from a command prompt window and type the command;

npm install serve-favicon

Ensure you have a working and good internet connection. Wait for some time as npm downloads and installs this module in your local machine.

Also, this middleware makes use of the path module which handles the path to the image to be used as favicon.

Now lets look at its usage.

 server.js

From the code above, note that;

- The favicon used here is an image (logo.ico) in the public folder located in the project directory. This was achieved using the path module.

- This middleware faviocon () takes as parameter the path and maxAge paramter, though in this case we used just the path param. As you already know, the path provides the source of the image.

- The maxAge parameter simply extends the amount of time the image(icon) will be cached and used as favicon. By default, it is one year even when the parameter maxAge is not set.

- If you refresh your web page and it doesn’t work, then ensure you clear cache and try again or press ctrl + F5 on the web page.

OUTPUT

It worked! Bravo!

Thanks!