When I was first learning to make websites with react. I didn’t know how to do a very basic thing, which was create a favicon.
Today I’m going to show you a very helpful tool that allows us to generate favicons, along with other meta tags that enable us to display our app on our users devices, such as smartphones in a presentable and predictable way.
The tool I’m referring to is realfavicongenerator.
It will give us an interface that will show us how our favicon will look on our site as well as how our app will show up on other users devices, if it is downloaded as a progressive web app or it as saved as link on the user’s homescreen.
To use the site, all you need to do is select a favicon image, which is at least 70 by 70 pixels. Although it is recommended that the image be 260 by 260. For optimal results. Note that the image can be a png, jpg, or svg.
I’m going to select an image of my own, which in my case is just the React logo. It then shows us how with the favicon our site will appear on desktop browsers and on Google to it.
We can use the original image or we can add margins and a background of our choice.
Then we’ll be shown our favicon on iOS and it’ll give us the same options as well as for Android, Windows and Safari.
Once you’re done selecting all these options, you’ll hit a button at the bottom to generate your favicons.
From there you’ll be given instructions on how to install your favicon, and download all the generated files.
If you’re using a standard react project. We’ll need to unzip all these files and put them in your static folder, which should be in the root of your project directory. After that, you’ll need to put all of the generated links and meta tags in the head of your app. You can do this by using the package react-helmet and inserting all of these taxes JSX elements, between them like you see below:
import React from "react";
import Helmet from "react-helmet";
function SEO() {
return (
<Helmet>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicon-16x16.png"
/>
<link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
</Helmet>
);
}
And finally, one great step to do. Final step to do is select check your fav icon and then insert your deployed site URL to see if you’ve provided all of the meta tags in there successfully. From there you’ll be given suggestions on how to do on what changes to make, if any.
Hope this helps in making your next React project more presentable across the web and on other users’ device.
Enjoy this post? Join The React Bootcamp
The React Bootcamp takes everything you should know about learning React and bundles it into one comprehensive package, including videos, cheatsheets, plus special bonuses.
Gain the insider information hundreds of developers have already used to master React, find their dream jobs, and take control of their future:
Click here to be notified when it opens
Discussion (2)
Hi Reed!
I just followed your article. I managed to avoid putting the generated files in the root of the static folder (I mean, 'static' in the react folder 'build'). I created a new folder - 'favicon' in the react folder 'public' and put files into it. Then in 'href' I used a prefix '%PUBLIC_URL%/favicon'
For example:
href="%PUBLIC_URL%/favicon/favicon-32x32.png"
Thank you for your articles!
p.s. for my self: We have to leave only one
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />or<link rel="manifest" href="%PUBLIC_URL%/favicon/site.webmanifest" />in index.htmlThanks for mentioning this, it's very important to add those %PUBLIC_URL% lines in those links.