Display SVG favicon for PDF files

Matthew Kwong 0
Viewed 52

Before someone closes this because of mistakenly thinking it is a duplicated question, I'm referring to SVG favicon in particular instead of ICO format. And there is a reason for that.

I'm using an SVG favicon in order to support both light and dark modes. In other words, the icon will change colors automatically thanks to the @media (prefers-color-scheme: dark) query in the SVG file. I also have a favicon.ico placed in the root folder for fallback support (a.k.a. Safari mainly).

Yet, when I open a PDF in a new tab, favicon.svg will not be loaded instead, the favicon.ico is loaded regardless of whether the browser supports SVG favicon. That can be a problem because the two icons will look different in dark mode, where the SVG icon changes colors while the ICO doesn't.

So is there any way to make the browsers display the "correct" icon?

favicon svg pdf html
1 Answers

A picture paints a thousand icons

The browser will use favicon.ico or similar for the html content see the left 3 are coloured. However once an embedded frame has full focus it is the pdf viewers task to display any suited icon Here the blob and remote pdf and local pdf do not themselves have a favicon to fall back on.

enter image description here

Each browser pdf extension will be different but generally it is the browser that provides fall back. Lets use an example svg icon enter image description here

Lets Icon nab it and apply it to another site

enter image description here

now lets try to display that in the iframe only

enter image description here

Clearly no problems in using SVG ico with PDF until you open in another tab enter image description here

I think you are missing the rule that if there is nothing to display in the current html context then the common FALLBACK is addressRoot/favicon.ico so the browser will use that whatever the browser tab color light or dark. so design your ico to match the svg one. However once the addressRoot/ is clients device there is no favicon.ico other than built into the browser, it really has nothing to do with PDF viewer just that is where its more noticable.

enter image description here

userVfkJ0
Related