generate app icons for create-react-app

How to generate your own app icons for React.js projects that are created using “create-react-app”

If you want to customise the app icons for your react app, Below are steps for doing so

Generate app icons for create-react-app

Create your icon. For the sake of this post and youtube tutorial I shall be using an icon that I have created using iPad and notes app, and the have saved the image as a screenshot (.png )
Go to https://realfavicongenerator.net/
Upload and keep everything default and then download the zip package
Next you will have to delete the create-react-app generated icons that we see on the image below
create-react-app generated logos
```
rm public/logo192.png
```
```
rm public/logo512.png
```

Now time to replace the file with the below code

manifest.json

With this code

                  {
                   "short_name": "Notes app by codegigs.app",
                   "name": "Codegigs Notes 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": "#009688",
                             "background_color": "#ffffff"
                 }

Now we are going to modify the
```
index.html
```
Find the below code present inside your index.html

index.html

Once you are already there, you should be deleting the above whole block in this image and the n update the index.html file as per the steps mentioned below.
1. For favicon file you should the below two lines to update the reference
```
<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">
```
2. For the “apple-touch-icon” you should be adding the below line
```
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
```
3. For “mask-icon” you should be adding the below line
```
<link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg" color="#5bbad5">
```
4. For “description” you should be adding the below line
```
<meta name="description" content="Codegigs Notes app" />
```
5. For “theme-color” you should be adding the below line
```
<meta name="theme-color" content="#009688">
```

Once all this changes are saved, and the react project is restarted, we should be able to see the app icon updated in our project

How to generate your own app icons for React.js projects that are created using “create-react-app”

Generate app icons for create-react-app

Leave a Reply Cancel reply