changing Favicons in j4 Topic is solved

[novii025]

I solved the problem in the following way

in the folder ... / media / system / images

I inserted my favicon.ico, however, it didn't give any result.

After a few other attempts, I deleted the following two files from that folder:

joomla-favicon-pinned.svg
joomla-favicon.svg

All that was left was the favicon that I added, and after reloading the site, it was displayed without any problems.

I did not go further into the study where the problem was, the template I use is Cassiopeia.

[Jaydot]

..in the folder ... / media / system / images...

That will be overridden when you update Joomla.

Cassiopeia looks for three pre-defined file names when it needs a favicon:
- favicon.ico
- joomla-favicon.svg
- joomla-favicon-pinned.svg.
(Make an svg version of your favicon, rename it to joomla-favicon.svg, make a copy of it and rename that to joomla-favicon-pinned.svg.)

Cassiopeia will first look in the ../cassiopeia/images folder; if there are no favicon files there, it will default to the images in the system folder.

So add the three files to ../media/templates/site/cassiopeia/images.

[novii025]

https://convertio.co/ico-svg/

I did as you suggested, although I still don't understand why they complicated the simple thing.

[sozzled]

Neither do we ...

[ceford]

I did as you suggested, although I still don't understand why they complicated the simple thing.

Neither do we ...

So that you can have a simple way to override the default icons with your own icons and have different icons in each of your templates.

[rgtr]

Hi
Works in Google Chrome 100%, but not in Mozilla Firefox or in Opera... cannot see where it would appear on samsung internet on my mobile...
So whats the fix
Richard

[bobdobelina]

This is ridiculous, it shouldn't be this hard to change a favicon. I've followed the information provided by everyone and it doesn't work for me.

[ceford]

Some browsers aggressively cache icons. To test, look at the source of your page. Near the top you will see the icon links. These are for the default icons:

Code: Select all

	<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="#0

And these are for some custom icons:

Code: Select all

	<link href="/templates/mytemplate/images/joomla-favicon.svg" rel="icon" type="image/svg+xml">
	<link href="/templates/mytemplate/images/favicon.ico" rel="alternate icon" type="image/vnd.microsoft.icon">
	<link href="/templates/mytemplate/images/joomla-favicon-pinned.svg" rel="mask-icon" color="#0

You can click on the link to see what is delivered. For me, the svg icons are displayed as text but the favicon.ico is a regular icon.

[BillEgerton]

If you look at https://magazine.joomla.org/all-issues/ ... ips-tricks, you will find some relevant advice (Iterm 4.1 - "overriding the Favicon"). I have not tried this, and need to spend some time understanding precisely what the words mean, but Marc Dechevre says that all you need to do is to create an OVERRIDE for the default Favicon, which seems to be called joomla-favicon.svg. Overrides go in some suitable sub-folder of /templates/cassiopeia/ - what I'm not precisely sure of is what sub-folder (but I'm guessing /images). So it looks to me as if the solution is to give your own favicon the name joomla-favicon.svg, and find the right sub-folder to put it in. There was a change between J4.0 and J4.1 which might have been precisely to allow you to do this.

[BillEgerton]

In J4.1, I have established that you need to put the overrides in /media/templates/site/cassiopeia/images. You need (I believe) your own icon in .SVG format, with the name joomla-favicon.svg, AND (probably) in .ICO format with the name favicon.ico. Don't ask me why this might be the case. If you look at the page source for your website before and after these changes, you will see that the URL for the icon files will have changed from /media/system/images to /media/templates/site/cassiopeia/images, and so will be picking up YOUR icon files rather than the Joomla default ones. And I believe that this is a folder that will not be altered when Joomla updates, so you will not loose your own favicon.

I think this may well solve your problems. Sadly, I have not been able to test this properly at the moment because the online ICO-to-SVG converters are failing to convert my icon properly. So when I added the two icon files, the Joomla standard favicon was replaced with a splodge. I can say definitely that only adding the .ico file does nothing.

Hope this helps. It would be really nice, wouldn't it, if a member of the Joomla development team occasionally looked in to save us poor amateurs lots of time.

[BillEgerton]

Yes! I found an SVG converter that worked, and now have my own favicon. It seems to work with just file joomla-favicon.svg in /media/templates/site/cassiopeia/images - no need for favicon.ico as well. I put the same .svg file in /media/templates/administrator/atum/images, and now have my favicon frontend and backend.

Remember this is for J4.1 - J4.0 is (I think) different.

[sozzled]

... no need for favicon.ico as well.

See https://caniuse.com/link-icon-svg

[aitim]

Here is a list of the minimum favicon files I need to be loaded. Normally I would just place these in the root directory. I realize that today that may represent a security vulnerability so instead this is probably better handled programmatically.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#9469bf">
<meta name="msapplication-TileColor" content="#e5ccff">
<meta name="theme-color" content="#e5ccff">

There are more file that should be included to handle some of the more obscure devices out there, because even though they are obscure, they represent millions of users.

Here is what Joomla 4/Cassiopeia provides.

$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']);

The thing is, this little head section needs to be greatly expanded so that all variety of favicons can be handled.

What does addHeadLink(HTMLHelper:: handle? I can see from this all the parameters that can be passed in, but what values for those parameters will addHeadLink(HTMLHelpewr:: recognize?

Here is what the documentation says:

addHeadLink

Adds <link> tags to the head of the document

addHeadLink(string href, string relation, string relType = 'rel', array attribs = array()) : \Joomla\CMS\Document\HtmlDocument

$relType — defaults to 'rel' as it is the most common relation type used. ('rev' refers to reverse relation, 'rel' indicates normal, forward relation.) Typical tag: <link href="index.php" rel="Start">
since

1.7.0
Arguments

href — string — The link that is being related.

relation — string — Relation of link.

relType — string — Relation type attribute. Either rel or rev (default: 'rel').

attribs — array — Associative array of remaining attributes.

Response — \Joomla\CMS\Document\HtmlDocumentinstance of $this to allow chaining

And HTMLHelper is defined as

HTMLHelper::

Arguments

$key — string — The name of helper method to load, (prefix).(class).function prefix and class are optional and can be used to load custom html helpers.

Response — mixed — Result of HTMLHelper::call($function, $args)

image

Write an <img> element

image(string $file, string $alt, array|string $attribs = null, boolean $relative = false, integer $returnPath) : string|null

So it seems like if I just play with this I can get the kind of links I want added to the head section. and then I just have to place the actual files in an appropriate location.

Any comments will be appreciated.

[rgtr]

Hi all
Seems like there is a common problem that time and development will provide a satisfactory solution to those of us who recognise a problem but not the solution ...
There are still difference in behaviour between Chrome, Firefox, and Opera in both front end and rear end.
Richard

[aitim]

that may be so, but I need a solution now. I will address all the browser compatibility issues. I think the Joomla function addHeadLink() has everything I need to make it work.

[rgtr]

Aitim
I look forward to your solution ...
Richard

[aitim]

Will keep you posted. Joomla really does need an interface for this, until then I will just code.

[aitim]

OK, here is how I changed the head section of index.php

$this->addHeadLink(HTMLHelper::_('image', 'sagacicweb-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', 'sagacicweb-favacon-pinned.svg', '', [], true, 1), 'mask-icon', 'rel', ['color' => '#000']);
$this->addHeadLink(HTMLHelper::_('image', 'apple-touch-icon.png', '', [], true, 1), 'alternate icon', 'rel', ['type' => 'apple-touch-icon']);
$this->addHeadLink('manifest.webmanifest', 'manifest', 'rel', ['type' => 'manifest']);

This produces the following links in the head section of the website:

<link href="/media/system/images/sagacicweb-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/sagacicweb-favacon-pinned.svg" rel="mask-icon" color="#000">
<link href="/media/system/images/apple-touch-icon.png" rel="alternate icon" type="apple-touch-icon">
<link href="/manifest.webmanifest" rel="manifest" type="manifest">

manifest.webmanifest contains the following:

{
"icons": [
{ "src": "/media/system/images/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/media/system/images/icon-512.png", "type": "image/png", "sizes": "512x512" }
],
"theme_color": "#e5ccff",
"background_color": "#e5ccff",
"start_url": "https://sagacicweb.com/",
"display": "standalone"
}

Oh yes, you have to create all these image files, .ico, .svg and .png and copy them to media/system/images. You also have to put manifest.webmanifest and a copy of favicon.ico in the root of the website as well. Things like RSS only look in the root for a favicon.

You can see the results at https://sagacicweb.com. This is just the Cassiopeia template where I have updated all the images to the latest from the James Webb Space Telescope (JWST.)

I got my inspiration from the following: https://evilmartians.com/chronicles/how ... most-needs

This is the minimalist approach, and I think it should work in 95% of all cases. If I have missed something, please let me know so that I can modify this so that it is more comprehensive.

[aitim]

I just wanted to add, I didn't make much of a change to the default Cassiopeia favicon declaration section because that covers most of the bases with the SVG files. I did add the Apple-Touch and the manifest.webmanifest entries because that covers addition bases not covered by the default Joomla entries.

But this did require me to pour over the Cassiopeia template and I have go to say that this is now an incredible template that can be adapted to just about any situation.

You can move elements around by simply manipulating CSS Grids. You can pare things down by removing some of the module positions for things like content pages, or donation pages that don't require all those module positions and by just editing the CSS Grid structure you can get perfect lean/mean child templates that look great on all devices.

I think this version of Joomla 4 is now the kind of CMS that everyone was waiting for. I would imagine that Joomla now starts capturing more market share, because it is now the best CMS out there.

[ita4012]

If you want to use your own favicons with the the default Cassiopeia/Atum templates you upload them to:

media/templates/site/cassiopeia/images

media/templates/administrator/atum/images

There are no favicons there by default so Joomla uses the icons in media/system/images for both Cassiopeia and Atum.

Good point there, I tried this for the site folder and the favicon still doesn't change, then I rename the 3 files in media/system/images into a different name from what they are initially, I guess since joomla couldn't load any of them due to incorrect name, it then used the one I uploaded under the site template as stated above and it works fine. There's one problem though, the default joomla icon for administrator does not load so I had to upload a 'joomla-favicon.svg' under media/templates/administrator/atum/images and it looks just like before.
Thanks all.

At the moment, it works for me too. Thanks

[ita4012]

If you want to use your own favicons with the the default Cassiopeia/Atum templates you upload them to:

media/templates/site/cassiopeia/images

media/templates/administrator/atum/images

There are no favicons there by default so Joomla uses the icons in media/system/images for both Cassiopeia and Atum.

Good point there, I tried this for the site folder and the favicon still doesn't change, then I rename the 3 files in media/system/images into a different name from what they are initially, I guess since joomla couldn't load any of them due to incorrect name, it then used the one I uploaded under the site template as stated above and it works fine. There's one problem though, the default joomla icon for administrator does not load so I had to upload a 'joomla-favicon.svg' under media/templates/administrator/atum/images and it looks just like before.
Thanks all.

Tested.
It works, but not on mobile phones (android).

[Jaydot]

...not on mobile phones (android).

Works fine on my android device. I find that caching on my phone can be even more tiresome than on my laptop... Did you try an agressive clearing of cache?

[rgtr]

Jaydot
How on earth do you do that ?
Richard

[cmbay]

How on earth do you do that ?

Here's the directions to clear the Chrome browser's cache:
Clear cache & cookies

[Jaydot]

...how on earth do you do that ?

Depends on your browser. And what @cmbay said .

[ita4012]

...not on mobile phones (android).

Works fine on my android device. I find that caching on my phone can be even more tiresome than on my laptop... Did you try an agressive clearing of cache?

I did. I know that I have to clear cache after similar changes, but it was no use.

[D0li]

hey all,

I tried to change favicon on Cassiopeia.
Tried all the following folders:
\template\cassiopeia\images
\media\system\images
\media\templates\sites\cassiopeia\images

it did not work at all. I added new svg files too. only I could reach was a black fav with no icon in it :S

Anybody can help with this?

Thanks
Gabor

[ceford]

hey all,

I tried to change favicon on Cassiopeia.
Tried all the following folders:
\template\cassiopeia\images
\media\system\images
\media\templates\sites\cassiopeia\images

it did not work at all. I added new svg files too. only I could reach was a black fav with no icon in it :S

You need to be specific about which platform and browser you are using. Browsers often aggressively cache favicons. For example, to update favicons for Safari on Mac you have to close Safari, then use the Finder to find and delete the Safari favicon cache.

You could try looking at the source code of your page, select the favicon link and force reload it.

This is where favicons go:

Code: Select all

For the cassiopeia template, Joomla will look for the favicons in the following locations:

1. media/templates/site/cassiopeia/images - they are not there so Joomla will look in the next location.
2. media/system/images - they are there so Joomla will use them from there.

[D0li]

Hi Ceford,

on windows and tried with Firefox, edge, chrome. Joomla is 4.2.3
Also, tried both of those folders. have all 3 favicon file there:
favicon.ico
joomla-favicon.svg
joomla-favicon-pinned.svg.

Thanks

[D0li]

it is ok on Firefox now, but nothing on Chrome. :S