loading...
Cover image for How to Generate a Favicon for Your React App

How to Generate a Favicon for Your React App

codeartistryio profile image Reed Barger Originally published at reedbarger.com on ・3 min read

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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.

Discussion

pic
Editor guide
Collapse
xai1983kbu profile image
xai1983kbu

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.html