Joomla 4 custom favicon

Question

I tried and searched...please tell me there's a simple way to update the favicon in Joomla 4 ? That there is a hidden upload button somewhere that I didn't find that will allow anybody to custom the favicon ?

I tried this : docs joomla on favicons , so to add a file name "favicon.ico" in my template who is set as default, without any success. I tried to delete all the cache and open it on a private navigation window. Nothing has changed.

Then I tried to replaced the "favicon.ico" in the "media/system/images". I was surprised it didn't work, but well ..

Then I tried to replace the "joomla-favicon.svg"...and then it worked ! But...why ???

And also...Do I really have to go in my "index.php" from my child template to kill those lines : (~line 25)

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

and add link manually the new favicon ?

And why would joomla name a favicon "joomla-favicon.svg" and "joomla-favicon-pinned.svg" not name them all favicon so we can replace them more easily on each support ?

Answer 1

First create a child template so we don't have to touch the core files. Create 2 square SVG icons and and a favicon.ico (32px x 32px).

• joomla-favicon.svg (dark/light browser theme color aware)
• joomla-favicon-pinned.svg
• favicon.ico

The default Joomla SVG favicons are a good reference to start with. The are located in media/system/images

Upload the files to media/templates/site/name_of_child_template/images

In the backend of Joomla go to system -> website template styles and make your child template the default. The favicons should now be changed to the new ones to the ones in you child template.

Alternatively you can use the Phoca Favicon extension. https://extensions.joomla.org/extension/phoca-favicon/

Answer 2

This appears to be the official procedure for using a custom favicon: https://docs.joomla.org/changing_the_site_favicon

However, the main part of that procedure didn't work for me (Joomla 4).

What did finally work was the procedure lower down on that page, under the heading 'My favicon is in another location'. I right-clicked the home page and clicked 'Show page source' in Firefox, looked for <link rel="shortcut icon", and found that the icon files are loading from /media/system/images/. I replaced the three icon files with copies of my custom icon, reloaded the home page, and the custom icon now appears.

The main problem with this procedure is that subsequent Joomla updates will overwrite the custom icon files with the defaults again.

I'm still looking for a procedure that allows custom icon files to survive Joomla updates.

Answer 3

Make sure you added the images to the correct folder. Also clear the browser cache. In my example the files are in a child theme called cassiopeia_theme

This should work...

Answer 4

I created a child template from the Cassiopeia template with only the favicon in it. Try to install and switch to the new cassiopeia_theme template. This should work...

Cassiopeia Child template download