I use favicon png file.

<link rel="icon" type="image/x-icon" href="favicon.png">

It works for my website and I can see my favicon on the browser tab.

But when I open a pdf document in a new page I see a broken icon on browser tab. Here how I open pdf document from my Angular app.

<a href= "{{getRegulamentoFile()}}" target="_blank" rel="noopener" style="color: var(--wb-blue-45)"> PDF Document </a>

Here is the broken icon on the left side: