Add a favicon to your Vite PWA
In a recent group project, I was tasked with turning our vite + react app into a progressive web app. A great place to start was the PWA Vite plugin, which built on the app we already had and came with clear documentation. While the full installation is beyond the scope of this article, I would like to focus on one of the PWA minimal requirements: the favicon.
Before this project I had not heard the word ‘favicon’, but I had noticed the small icons on the browser tabs of the web pages I visited. It was a lightbulb moment to connect a new word in the documentation with a design feature that I knew had the potential to make good web pages stand out. Here is the process that I followed to implement a favicon into our group project.
Create a simple image with a transparent background
Simplicity is key because a favicon in a browser tab is 16x16 pixels. Our project had an excellent logo, but it was too complex for the small space. Instead of using the logo directly, I used our site color palate to make a coordinating image that would work on a smaller scale.
The first time I went through the process, I added the logo without a transparent background. Our favicon image appeared in the browser tab within a white square- not the clean and polished look I was going for! Fortunately, it was a relatively simple fix to remove the background: Adobe Express has a free background remover.
Make use of good tools
With a little bit of research I found that there are favicon converters available online (there are several, but the one that suited my needs best is the favicon.io favicon generator). This news was even better than I realized, because when I put the image through the converter, it produced several different files that all fit within the PWA Vite plugin manifest. A process that had seemed daunting became much more straightforward.
Add your favicon into your code
I followed the plugin documentation and inserted my converted favicon images into the correct places within the code: the vite.config.js file and the index.html file. It took a bit of tinkering to get everything in the right place, but I was able to see the moment that the image first appeared on the browser tab.
When I started the process to make our app a PWA, I did not grasp how it was relevant or useful to our project. The simple journey of creating my first favicon helped me understand and appreciate the value of a progressive web app. I look forward to filling small spaces with big creativity by implementing favicons into many future projects.
Sources
In addition to the links above, an article titled “What Is a Favicon, Why Is It Important, and How Do I Add One?” by Jay Kang was a helpful starting place to learn about favicons.