Add App Favicons

Create React App generates a simple favicon for our app and places it in public/favicon.ico. 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.

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.

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="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">

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.