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
To include a file from the
public/ directory in your HTML, Create React App needs the
Copy the generated code and add the
%PUBLIC_URL% prefix to all the URLs. It should look something like the following.
Add it to your
<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="manifest" href="%PUBLIC_URL%/manifest.json"> <link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg" color="#5bbad5"> <meta name="theme-color" content="#ffffff">
And remove the following line that references the original favicon.
<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.