Your cart is empty

Tips for Cassiopeia (J4)

Current Quickstarts

joomla 4 quickstart packages
Various extensions can be selected!

Use of Favicons

Favicons are small symbols (similar to a small logo) that make a website recognizable. They are displayed next to the page title in the browser tab or in the bookmark. Especially when a user has opened several tabs, favicons help with orientation.

Image of Favicon

Three different favicons are used in Joomla 4:

  • joomla-favicon.svg
  • favicon.ico
  • joomla-favicon-pinned.svg


While older browsers only use favicon.ico, modern browsers use the "svg" file format.
The Joomla 4 favicons are in the following directory:
/media/system/images/...

They are specified in the index.php of the template (Cassiopeia):

$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon.svg', '', [], true, 1), 'icon', 'rel', ['type' => 'image/svg+xml']);

$this->addHeadLink(HTMLHelper::_('image', 'favicon.ico', '', [], true, 1), 'alternate icon', 'rel', ['type' => 'image/vnd.microsoft.icon']);

$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon-pinned.svg', '', [], true, 1), 'mask-icon', 'rel', ['color' => '#000']);

In the html source code of the website it looks 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">
<link href="/media/system/images/joomla-favicon-pinned.svg" rel="mask-icon" color="#000">

Important: The order must be observed!
Joomla first checks whether the file "joomla-favicon.svg" exists and uses it. If this does not exist, the "favicon.ico" file is searched for and used. Modern browsers usually use the svg file. Older browsers can only use favicon.ico.
 

Use your own favicons

If you want to use your own favicons, copy them into the following directory from the Cassiopeia template:
templates\cassiopeia\images...
(this also applies to other Joomla 4 templates)

Important note:
Joomla first checks whether there are favicons in the template. But if you only have a favicon.ico and use a modern browser, then Joomla uses its own joomla-favicon.svg, since Joomla always follows the order. Therefore you should provide at least one joomla-favicon.svg and one favicon.ico to support both modern and older browsers!

Notes

All prices quoted in Euro include the statutory German VAT of currently 19%. The final price can change after entering the billing information, for example if the order is placed as a company. The prices refer to the creation of the Quickstart packages.
More

Joomla! Trademark

Joominator.de is not affiliated with or endorsed by The Joomla! Project™. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.

Joomla Logo