Adding Custom Favicon to Joomla 4.0.x

To add a custom favicon in Joomla 4.0.x with the default cassiopeia template, all you need to do is to:
  1. Convert your image into an SVG file using some free online converter. I used https://convertio.co/
  2. Navigate to the "\templates\cassiopeia\images" folder and paste this SVG file there.
  3. Name it as joomla-favicon.svg
  4. Create its duplicate in the same folder and name it joomla-favicon-pinned.svg
That's it! Now, if you refresh your website, it should be flaunting your all new custom favicon, instead of the default cassiopeia favicon.

Now, to change the favicon of the administration portal, past the two SVG files in the "\administrator\templates\atum\images" folder.
[Note:] While Joomla 4.x's default front-end theme is Cassiopeia, its default administration theme is Atum.

Sources/Credits:
  • dgrammatiko's answer on the page: https://issues.joomla.org/tracker/joomla-cms/35277

Comments