How to setup the favicon of a React app
This guide explains the right way of creating a favicon for a React app from create-react-app: quickly, easily and perfectly
Adding a favicon to a React app shouldn't be that complicated. After all, React is probably the most popular frontend framework. Therefore, the Internet doesn't lack of articles which explain to do just this.
But this one is special. It comes with a triple promise:
Easy: You won't have to create icons by yourself. You won't even have to open an image editor or resize any image.
Quick: Done in less than 5 minutes.
Perfect: Your logo will be gorgeous everywhere: browser tag, smartphone home screen, search engine result pages.
All you need is a React-dedicated favicon generator
Spoiler: we are going to use an online tool: a favicon generator for React. More precisely, for React apps created with create-react-app.
Wait, there are a lot of favicon generators. Why would we need a new one? Because this one is going to save us a lot of time and efforts. Part of RealFaviconGenerator, the generator designed for React creates the favicon assets (a bunch of icons and HTML markups), but also the instructions to add them to our React app project.
Just like we said: easily, quickly and perfectly.
If you just want to get the job done, you can jump in right away and forget about this tutorial.
Step by step
Got your logo, preferably in SVG format? Let's go to the React favicon generator page and submit it.
We're now in front of an editor. It's time for our logo to shine! We can round corners of our icon to make it less sharp, or apply a background color to suppress transparency and add more contrast.
We do this platform per platform: desktop navigators and Google result pages, iOS, and finally Android.
Perfect!
After that, we click "Next" to get the instructions to follow to add the favicon to our app:
First, let's download our icons. They were all resized, cropped and edited for us.
Quick!
The major takeaway is that the instructions are designed for a React app created with create-react-app. For example, the markups should be added to the main HTML template, in /public/index.html. We don't even have to read some doc or anything.
Easy!
Conclusion
No one cares of being called a "favicon expert". But handling this task like a pro really makes a difference. You can spend an hour or more collecting data from various sources, edit the icons manually, search for more tutos to find out how to put all this in a React app. There is neither joy nor glory going through this.
Don't waste time for such a mundane task. Use a favicon generator for React.