Adding custom favicons to your react app
Jul 18th, 2019
In a previous post I mention a great site called favicon.io for using a wide range of free favicons on your site. What if you would like your own custom favicon and or the options on the site do not suffice. There is a free and easy way to do this. Use the favicon convertor to convert an image to a favicon. Now you just need a custom image. If you don't have one and easy, free way to create a custom image is to use PiktoChart. I created an image using PiktoChart and used a cool graphic from the graphics library. After downloading this as a PDF, I wanted to make the background transparent. For this, a used another free, easy to use online tool called LunaPic which converted the background to transparent. This was then uploaded the the favicon convertor and by transparent custom favicon was ready.
Replacing this in a React site is easy. I simply replace the favicon file in the public folder. After a full page reload, you should see the new transparent favicon!