[J4] Fix Favicon Appereance in Chrome

[coolcat-creations]

Pull Request for Issue #34767.

Sorry for the wrong commit message

Summary of Changes

The Issue describes a problem in Chrome that the favicon svg is not displayed correctly when using darkmode.
Confirming this issue I researched at officially Chrome should meanwhile support the prefers-color-scheme media query. But altought I updated to the latest Chrome Version Version 101.0.4951.41 (Official Build) (arm64) it does not.

So I found another workaround where the specific favicon can be added by using media as attribute in the link.

Testing Instructions

Enable Dark mode in Chrome
Check if Joomla Default Favicon is white on dark ground in Frontend (using Cassiopeia) and Backend (using atum) and on login, error and offline page

Actual result BEFORE applying this Pull Request

The Default Joomla Favicon shows black on black in Frontend (using Cassiopeia) and Backend (using atum)

Expected result AFTER applying this Pull Request

Documentation Changes Required

no

[pritam825]

@coolcat-creations I think the issue in the logo when opening in microsoft edge , not in chrome because in chrome there is no any direct features (system default, light, dark) like microsoft edge and github logo is also not changing with changing the theme , but when applying the patch it's working fine for microsoft edge but the logo is coming, different from the expected result.
This logo is coming after applying the patch and with the dark theme of microsoft edge.

Thanks :)

[dgrammatiko]

@coolcat-creations the bug seems that is already fixed in chrome https://bugs.chromium.org/p/chromium/issues/detail?id=1311553#c12

Also this PR breaks badly B/C for people that have created their own favicons, so in that sense it's wrong

[coolcat-creations]

Did you check in chrome ? Because I did and it seems to work for normal displayed svg on a website) but not for svg used as favicon.

[dgrammatiko]

Did you check in chrome ?

Yes, Chrome Canary 103 works for me

[coolcat-creations]

@dgrammatiko there is no Version 103 available for Mac... And the issue is still there. But if you are saying thats purely a chrome issue and even if this PR fixes it - we have to close both: issue and PR

[coolcat-creations]

@pritam825 your issue is bit unrelated to this one. Your Browser does not support svg at all and so it shows the ico format.

[pritam825]

@coolcat-creations ok got it mam, and my According pr and issue both should be closed, because if we will used dark theme in chrome, GitHub logo is also not changing as we are comparing to GitHub, Thanks :)

[coolcat-creations]

My github logo is changing, my Joomla Logo not.

Funny is that github delivers a separate dark icon like I proposed here. :-)

[dgrammatiko]

there is no Version 103 available for Mac.

Nightly build for developers: https://www.google.com/chrome/canary/

And the issue is still there

You have to test the canary version

But if you are saying thats purely a chrome issue and even if this PR fixes it

It is a Chrome issue, Safari and Firefox obey the CSS of the SVG and that PR seems to solve the the issue. Also, again, this PR is introducing a B/C break on both the templates...

[coolcat-creations]

How comes you think it's a bc break? Its a new file and did not change an existing file.

[dgrammatiko]

How comes you think it's a bc break? Its a new file and did not change an existing file.

So, if I have created an svg file for both cassiopeia and atum that have css to control the dark/light theme then that file will be available only on the light theme and on dark theme I will get the standard joomla logo. In other words you broke existing functionality.

Also please understand that this IS a chrome issue and THEY have to fix it. Patching Joomla is not the right path

[Bakual]

It's not a B/C break per our definition (Design/HTML markup is explicitely excluded). Just saying 😄

[brianteeman]

I have tested this item ✅ successfully on 768793c

Confirmed issue on windows with chrome Version 102.0.5005.63 (Official Build) (64-bit)

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/37713.}

[Quy]

In Windows Firefox 101.0.1 (not dark mode), it displays the white icon.
The first tab is from the prebuilt packpage of this PR.
The second tab is from the nightly build.

[HLeithner]

This pull requests has automatically rebased to 4.2-dev.

[joomla-bot]

This pull requests has been automatically converted to the PSR-12 coding standard.