How to create a dynamic WhatsApp FAVICON with NextJS
Nowadays, modern browsers and new development frameworks give us the possibility of creating solutions that were previously more complicated to carry out and that today are of great help for the usability of a product.
To give an example of this, the WhatsApp Application allows us to observe when someone has sent us a message or we have several unread messages, WhatsApp emits different types of notifications that range from a sound, a push notification or simply showing an ICON with the number of messages we have unread.
In this article we will talk about the notification in the FAVICON, which visually shows us the number of notifications that we have without reading.
What will we use?
NextJS
ChakraUI
The first thing we need to do is create our project in NextJS, by running any of the following commands.
yarn create next-app
or
Npx create-next-app@latest
or
Pnpm create next-app
Once our project is created, we navigate to our project container folder to install and configure Chakra
Now we install CHAKRA.
yarn add @chakra-ui/react @emotion/react@¹¹ @emotion/styled@¹¹ framer-motion@⁶
When this process has finished, the next thing is to configure our chakra, to do this within the project folder we execute the following command.
code .
This command will open our project, now within our folder structure we look for the pages folder and within it we look for the file called _app.js
We proceed to open it and import our chakra library and we would have the following result.
If we run our server we could see that everything is working correctly.
Next step we start to develop the functionality of our favicon.
We import the Button, Flex and Box Components from Chakra-ui in index.js
We import useState and useEffect from react in index.js
We create our 2 variables that we will need
We create our variable with our SVG image of the WhatsApp notification.
We create our function for generating BLOB files from an SVG image.
We create a function to update our counter and execute our BLOB function
We initialize our first run to create our first image
Finally we create our HTML structure
Inside the Tag <title> we will make some small changes, being as follows.
Inside the Tag <link> we also make the corresponding changes to be able to detect the corresponding icon, it should look like the following.
Time to run our project!
If everything has gone great, if we press our button we will see that our icon begins to change along with our counter.
Great!
Conclusion
We can use this functionality in our real projects by changing the WhatsApp SVG for ours and adding more complex functionality.
The rest is up to you…
download the source code at https://github.com/mostrilio/favicon_dynamic_next
