Amazon.co.uk Widgets
This site (which is based on Cassiopeia) in a tab in Chrome, showing the favicon
This site (which is based on Cassiopeia) in a tab in Chrome, showing the favicon

By default Joomla 4 uses the icon assets in /media/system/images/. These are the Joomla logo formatted for use as a favicon. (Like this: ).

<link href="/media/system/images/joomla-favicon.svg" rel="icon" type="image/svg+xml">
<link href="/media/system/images/favicon.ico" rel="alternate icon" type="image/vnd.microsoft.icon">

Custom Cassiopeia template favicon

There are a couple of ways of getting custom favicons (Like this: ) in your new Joomla 4 site based on the Cassiopeia template

  • Use your hosting providers file manager to add images in templates/cassiopeia/images where they will not be overwritten
  • Use a module. Specifically the KickstartCassiopeia module, to set to youe preferred icon and let it take care of it

Method 1 - Add images

You'll need to add images in the templates/cassiopeia/images folder on your site with specific filenames joomla-favicon.svg,joomla-favicon-pinned.svg and favicon.ico and the files will need to be in the correct formats.

Method 2 - Use KickstartCassiopeia

There is a paid pro (€15) and a free version of this module. Install it, enable it, position it in your Joomla based site, and then you can enable your favicon easily. This worked fine for me in Chrome, Firefox but not Safari! I like this module. It lets me use Cassiopeia, safe in the knowledge that future Joomla updates won't trample on my customisations. I hope it continues to be developed and updated. It is like a little Swiss Army Knife for the Cassiopeia template in Joomla 4

<link href="/images/ezone-127-transparent.png#joomlaImage://local-images/ezone-127-transparent.png?width=126&height=100" rel="alternate icon" type="image/vnd.microsoft.icon">
<link rel="apple-touch-icon" sizes="180x180" href="https://ezone.co.uk/images/ezone-127-transparent.png#joomlaImage://local-images/ezone-127-transparent.png?width=126&height=100">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">  

See also:
Github - [4.0] Cassiopeia favicon - make configurable #35277
KickstartCassiopeia is a module that kickstarts your use of the default Joomla 4 template