Html Question posted in
Some basic documentation can be found here.

Html – Favicon is broken when open a new tab

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:
enter image description here

Tags:

2

Answers


  1. 0

    This is because the favicon is defined by HTML pages only. When showing a PDF document, your browser doesn’t get any information about the website favicon and simply does its best.

    The icon you see is not "broken", but probably comes from another site. If you are running your app locally and you access it via localhost, the icon might come from another site you worked on.

    There is no strict rule to overcome this issue, more like trial and error. The only recipe I know is to make sure /favicon.ico is available in addition to all other favicon images (eg. http://localhost:3000/favicon.ico). This is a well-known convention and browsers often follow it in such situation.

    Login or Signup to reply.
  2. 0

    When you load HTML with a "Link" to ICO and Frame(s) the HTML Icon and Title are used, even if it is not yours. So here it is "Linked" (Icon nabbing) to DuckDuckGo and the framed PDF(s) to anywhere else you need.

    enter image description here

    When you link a browser tab to any site frame, WHATEVER that may be, such as a _blank tab, it is the browser supplies its own LOCAL Document Icon and Title (if it has one allocated for that mime doc type).

    enter image description here

    Thus a similar issue with or without carrier HTML

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search