Add App Favicons

Create React App generates a simple favicon for our app and places it in public/favicon.ico of our app. However, getting the favicon to work on all browsers and mobile platforms requires a little more work. There are quite a few different requirements and dimensions. And this gives us a good opportunity to learn how to include files in the public/ directory of our app.

For our example, we are going to start with a simple image and generate the various versions from it.

Right-click to download the following image. Or head over to this link to download it — https://serverless-stack.com/assets/scratch-icon.png

To ensure that our icon works for most of our targeted platforms we’ll use a service called the Favicon Generator.

Click Select your Favicon picture to upload our icon.

Once you upload your icon, it’ll show you a preview of your icon on various platforms. Scroll down the page and hit the Generate your Favicons and HTML code button.

This should generate your favicon package and the accompanying code.

Click Favicon package to download the generated favicons. And copy all the files over to your public/ directory.

Let’s remove the old icons files.

Note that, moving forward we’ll be working exclusively in the frontend/ directory.

Run the following from our frontend/ directory.

$ rm public/logo192.png public/logo512.png

Then replace the contents of public/manifest.json with the following:

{
  "short_name": "Scratch",
  "name": "Scratch Note Taking App",
  "icons": [
    {
      "src": "android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "android-chrome-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#ffffff"
}

To include a file from the public/ directory in your HTML, Create React App needs the %PUBLIC_URL% prefix.

Add this to your public/index.html.

<link
  rel="apple-touch-icon"
  sizes="180x180"
  href="%PUBLIC_URL%/apple-touch-icon.png"
/>
<link
  rel="icon"
  type="image/png"
  href="%PUBLIC_URL%/favicon-32x32.png"
  sizes="32x32"
/>
<link
  rel="icon"
  type="image/png"
  href="%PUBLIC_URL%/favicon-16x16.png"
  sizes="16x16"
/>
<link
  rel="mask-icon"
  href="%PUBLIC_URL%/safari-pinned-tab.svg"
  color="#5bbad5"
/>
<meta name="description" content="A simple note taking app" />
<meta name="theme-color" content="#ffffff" />

And remove the following lines that reference the original favicon and theme color.

<meta name="theme-color" content="#000000">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="apple-touch-icon" href="logo192.png" />
<meta
  name="description"
  content="Web site created using create-react-app"
/>

Finally head over to your browser and try the /favicon-32x32.png path to ensure that the files were added correctly.

Next we are going to look into setting up custom fonts in our app.