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

    1. 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 )

    2. Go to
    3. Upload and keep everything default and then download the zip package
    4. Next you will have to delete the create-react-app generated icons that we see on the image below
      logos create-react-app
      create-react-app generated logos
      rm public/logo192.png
      rm public/logo512.png
    5. Now time to replace the file with the below code

      With this code

                         "short_name": "Notes app by",
                         "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"
    6. Now we are going to modify the

      Find the below code present inside your 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

Leave a Reply

Your email address will not be published. Required fields are marked *

Doubts? WhatsApp me !