Browser's tab icon not showing when deploying on Netlify

I'm deploying a React App in Netlify. I've made few changes to make my custom icon and the name of my App appears in the browser's tab, but it just shows the name, not the icon.

These are the changes that I've made:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="The Mini Blog" content="The Mini Blog" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/blog-pic.png" />
    <title>The Mini Blog</title>
  </head>```

To be more specific. The favicon.ico is the image that I want to use as icon in the tab. I did that change in the first <link> tag.

In the second <link> tag I added the same icon that is in favicon.ico but under the name "blog-pic.png"

And last, the title tag with the name of my app.

Noteworthy that when I run my app locally displays everything fine.

Thanks in advance.