favicon.png image is not loading in modern browsers

Hi Team,

I am facing an issue with favicon loading.

Previously, I only had the following code in my application, and it worked as expected:

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

As part of an update, I wanted to use a favicon.png file since most modern browsers support PNG favicons. I replaced the ICO file with the following, and it worked correctly:

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

However, for backward compatibility with older browsers, I included both the PNG and ICO files:

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

I expected modern browsers to load favicon.png and use favicon.ico only as a fallback for browsers that do not support PNG favicons. Instead, the browser always loads favicon.ico, and the PNG file is ignored.

Is this the expected behavior? If both favicon types are specified, should the browser always prefer the ICO file, or should it use the PNG file when supported?

To reproduce the issue, use different images for favicon.png and favicon.ico so it is easy to identify which favicon the browser is displaying.

Thanks in Advance,

Regards

Veera