article cover

How to Generate a Favicon for Your React App

Reed Bargerviews icon-
react
react

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.

Alt Text

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.

Alt Text

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.

Alt Text

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.

Alt Text

Hope this helps in making your next React project more presentable across the web and on other users’ device.



course cover
Join The 2020 JS Bootcamp Video Course 🏕️
Code ArtistryWatch Now
Reed Barger
Professional JS developer who loves to write. Here to make you a better developer, faster.