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: