Details

Written by: richin

Category: Blog

Published: 22 May 2024

Hits: 1005

I tried to change the favicon of my Joomla site but only came up with a workaround for Joomla 5 Cassiopeia.

First you upload your favicon.ico icon in /media/templates/site/cassiopeia/images/

Then delete the following lines of the Cassiopeia Template:

// Browsers support SVG favicons
$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon.svg', '', [], true, 1), 'icon', 'rel', ['type' => 'image/svg+xml']);
$this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon-pinned.svg', '', [], true, 1), 'mask-icon', 'rel', ['color' => '#000']);

You only dont delete the following line:

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

Then you can refresh you page and it should work:

Open a browser. Do you see your new icon? If so, congratulations. If not, that doesn't necessarily mean you did anything wrong. Browsers are designed to minimize data traffic, so they don't refresh the favicon every time they show a page. Even refreshing the page (F5) won't help. So you need to refresh more thoroughly:

• Mozilla / Firefox / Safari: hold down Shift while clicking Reload, or press Ctrl-Shift-R (Cmd-Shift-R on Apple Mac);
• Konqueror: simply click the Reload button, or press F5;
• Opera users may need to completely clear their cache in Tools→Preferences.
• Chrome: Shift-F5
• If this doesn't work you will need to delete the temporary internet files and the history and then open your page again. Or delete your favicon, refresh the browser with F5, then upload the favicon