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.
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!
