changing Favicons in j4 Topic is solved

[Jaydot]

Is there any documentation for the best way to add favicons to a J!4 site?
Not just the .ico, but the icons for phones and tablets and things?

I've figured out that the favicon.ico goes into media/system/images, but that will be overwritten on update, won't it?

When using J!3, I ftp all the icons to the root folder, and add the attached code to (my copy of) the template's index.php.
But I assume Cassiopeia will be updated from time to time, so using a copy of Cassiopeia and editing it's (her?) index.php is probably not the way to go...

brave_wwSbCDPVwZ.png

[JTema]

You can upload your favicon.ico to templates/yourtemplate folder. When creating favicon.ico select all size then upload your template folder and that is all. No extra coding. I frequently use that site to create my favicons : https://www.icoconverter.com/

PS: Sorry I thought that you are using joomla 3 then realized joomla 4 I have not tested that way on joomla 4

[JTema]

I have just downloaded and tried on joomla 4 uploading favicon.ico to templates\cassiopeia\images seems to work. So you can use the way described above for joomla 4.

1.jpg

[Jaydot]

... uploading favicon.ico to templates\cassiopeia\images seems to work...

Thanks, but my question wasn't about just favicon.ico. As I said, I already figured that out. And wouldn't your solution also be overwritten on update?

My question was about all the other icons you need, as explained on the https://realfavicongenerator.net/.

[JTema]

And wouldn't your solution also be overwritten on update?

It will not be overwritten.

[Jaydot]

And wouldn't your solution also be overwritten on update?

It will not be overwritten.

Yes it will. In fact: it just did

[sozzled]

Yes, I really want to know the answer to @Jaydot's question, too. I would like to know how to change the favicon for both Cassiopeia and Atum—each one individually—and not have the file (or file reference) overwritten or replaced with each update of J! 4.x.

Is it possible and, if so, how?

[ceford]

Both Cassiopeia and Atum have the calls to create ico links hard coded near the top of the index.php file:

Code: Select all

// Browsers support SVG favicons
$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']);

So if you want alternative icons it looks like you need to clone the template or look for a plugin to change the link onAfterRender.

[sozzled]

Thanks, @ceford. I've spent a few hours over the past four days looking into this and I see where Cassiopeia and Atum generate the links. I don't want to clone the templates: remember, we're discussing J! 4.0.0 and who knows what future changes may exist in the next few months. So that brings us to the second solution you suggested: create a plugin.

I wrote a plugin for J! 3.x and it works very well. My plugin was based in part on information written in the documentation. All of that changed after reading https://issues.joomla.org/tracker/joomla-cms/32241. The problem there, of course, is that the GitHub specialists closed the issue as something for the "Joomla forum".

I have a lot of questions. To begin, do I need to have three image files for each template where I want a "favicon"?

Another question: in my plugin which is triggered with onBeforeCompileHead, I am using the following method to find where the existing favicon [.ico] file is defined (before I unset it and use JFactory::getDocument()->addFavicon to replace what I just removed):

Code: Select all

                     // first remove the existing favicon.ico
	             foreach ($document->_links as $k => $array) {
                         if ($array['attribs']['type'] == 'image/vnd.microsoft.icon') {
                             unset($document->_links[$k]);
                         }
                     }

The if statement fails with the error "Undefined index", which means that there's something wrong with the foreach statement that doesn't return the array. I don't know the answer. I'm not sure that the plugin should be triggered onAfterRender. The plugin needs to be triggered before the headers are written, yes?

[sozzled]

Further investigation and I've made some progress:

It's always a little dangerous when "folklore" gets involved. As many of us have experienced when we've changed a website's favicon, the new image doesn't immediately show in the browser tab because the old image is stored in the browser cache and needs to be flushed. Because of this folklore, that's why I was trying to unset the default favicon before using the addFavicon($href, $type, $relation) method. It turns out that you don't need to flush one before adding the other.

However, I did find that (even when I went ahead with using a .ico file as my favicon), Mozilla Firefox seems to have fallen in love with the .svg file that's stored in the path ../media/system/images. That's kind of a pain.

On the one hand, I would rather use the .ico file instead of the .svg file and, on the other hand, you don't go around renaming existing .svg files as .svg-old, for example, in folders that are refreshed whenever there's a new update. So, to work around this, one needs to create two files (at least): one that is a .ico file (which works on browsers that haven't implemented support for SVG files, yet) and the other that is a .svg file.

While I would rather not have to create SVG files and, instead, simply unset the favicons that J! 4 has deployed and allow the browser to fall back to using ICO files, I can't figure out the appropriate method to get the document link attributes.

The following code demonstrates the problem and, I'm sure, an expert can identify the problem:

Code: Select all

//Import Joomla! plugin related class.
jimport( 'joomla.plugin.plugin' );

class plgSystemMyFaviconPlugin extends JPlugin
{
 	public function onBeforeCompileHead() {
          
            $app = JFactory::getApplication();
	    if ($app->isClient('site')) {                                                   // ignore this part if on backend
		$document = JFactory::getDocument();			     // <---- this is not right for J! 4
/*		Should use      Joomla\CMS\Document::something() to get the document array
		but I don't know the correct classname and syntax to do it.				*/ 
		$fnfavicon = $this->params->get('fnfavicon1','-1');           // if no .ico file selected, the parameter will contain "-1"
		if ($fnfavicon != '-1') {
                     // first remove the existing favicon.ico
	             foreach ($document->_links as $k => $array) {
                         if ($array['attribs']['type'] == 'image/vnd.microsoft.icon') {
                             unset($document->_links[$k]);
                         }
                     }
                     // now replace the favicon with the user's choice
                     $href = '/images/' . $fnfavicon;
                     $type = 'image/vnd.microsoft.icon';
                     $relation = 'shortcut icon';
                     JFactory::getDocument()->addFavicon($href, $type, $relation);
                }
            }
.
.
.
}

If I could figure out how find the links containing SVG files and then unset them, I think this would plug that hole. Alternatively, it would be lovely if somewhere in the J! 4 core CMS, one could define favicon files that are used on the website.

[ceford]

I have just realised that I have this problem too, along with every other Tom, Dick and Harry who wants to use a custom favicon. I think the favicon file names should have been configurable - maybe something for a future Cassiopeia update. Meanwhile, ... edit index.php or create a plugin?

I have submitted an issue asking for the favicons to be made configurable.

[sozzled]

Thanks, @ceford. No, I'm not going to edit the index.php (or attempt some kind of template override). This should be simple.

Basically, there must be an analogue in J! 4 for JFactory::getDocument() but I don't know what it is. I've searched the internet to find what is the new method to get the document object. I'm guess that it resides somewhere in the Joomla\CMS\Document class but I can't figure it out.

Perhaps I could ask the question this way: what PHP statements would be used to remove all existing favicons from the document (without renaming or deleting the files)? It's pretty simple; it's doable (I think) but I just need one line of PHP to replace

Code: Select all

$document = JFactory::getDocument();

Thanks for submitting the item on the Issue Tracker but it's not just Cassiopeia in isolation of any other template. The question relates to all templates (whether the template is Cassiopeia, Atum or something else). So I hope that the facility to optionally select any other file as the favicon won't become part of just one template—the Cassiopeia one, for example.

As I've written earlier, I have a plugin that works well with J! 3.x. It's a bit like "groundhog day": we've had this discussion before, e.g. viewtopic.php?t=937844 or viewtopic.php?t=930055 and it progressed much past "replace the file(s) whenever you update" ...

[ceford]

You can try getting the document from the application. Here is an example getting the web asset manager:

Code: Select all

$wa = Factory::getApplication()->getDocument()->getWebAssetManager();

But I think Factory::getDocument() should work too.

[sozzled]

Thanks, @ceford, I'll have a look. We'll see.

[sozzled]

Tried to use "Factory" instead of "JFactory"

This generates a "HTTP 500 Whoops, looks like something went wrong. (Class not found) error "Attempted to load class "Factory" from the global namespace.""

Factory::getDocument() should work too.

It doesn't work.

[brian]

The file is namespaced so if you want to use "Factory" you will need to add the correct statement at the top of the file (if its not already present)

Code: Select all

use Joomla\CMS\Factory;

[brian]

However, I did find that (even when I went ahead with using a .ico file as my favicon), Mozilla Firefox seems to have fallen in love with the .svg file that's stored in the path ../media/system/images. That's kind of a pain.

ALL browsers aggressively cache the favicon irrespective of which file format is used

[sozzled]

Thanks, @brian. I'll play around with this some more.

[sozzled]

... uploading favicon.ico to templates\cassiopeia\images seems to work...

Thanks, but my question wasn't about just favicon.ico. As I said, I already figured that out. And wouldn't your solution also be overwritten on update?

I took @Jaydot's reply at face value. It's not true that "it doesn't work"; the update does not replace any user-uploaded files placed in the folder ../templates/cassiopeia/images.

As a simple test, I uploaded a file called favicon.ico to ../templates/cassiopeia/images. I reloaded the frontend and these are the generated links:

Code: Select all

	<link href="/media/system/images/joomla-favicon.svg" rel="icon" type="image/svg+xml">
	<link href="/templates/cassiopeia/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">

Then I ran the Joomla! Update component and replaced the core CMS files. Then I looked at the folder and the uploaded file was still there.

However, I'm using Mozilla Firefox browser and the browser prefers, it seems, to display the SVG versions of the favicon. I'm therefore trying to work out how to override this preference if it's possible to do.

[Maradona]

I have submitted an issue asking for the favicons to be made configurable.

Big Thank You!

[ceford]

Solution: the code looks for icons in the template/images folder and, if not found there, in the media/system/images folder. So put your custom icons in template/images. They are not present there in a default installation and will not be touched if there is a template update.

Also, take the time to learn how to make svg images - it will pay off in the long run. I have used Inkscape but not for some time.

Some links:
https://css-tricks.com/svg-favicons-and ... with-them/
https://inkscape.org/

[Jaydot]

I took @Jaydot's reply at face value. It's not true that "it doesn't work"; the update does not replace any user-uploaded files placed in the folder ../templates/cassiopeia/images.

I was convinced I put my favicon in cassiopeia/images - it was showing up fine before the update from RC5 to 4.0.0. With all this experimenting going on, however, I might be mistaken. Sorry.

So put your custom icons in template/images.

In the meantime, I renamed the svg version of my favicon to joomla-favicon.svg and another copy of the svg version to joomla-favicon-pinned.svg, and put them (and the favicon.ico) in cassiopeia/images.

Code: Select all

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

Lo and behold! J4 is now using all three of them.
Can't wait for the next update to see if they stick .

[Maradona]

Solution: the code looks for icons in the template/images folder and, if not found there, in the media/system/images folder. So put your custom icons in template/images. They are not present there in a default installation and will not be touched if there is a template update.

Thank you!

[GPooj]

I know this appears to have been resolved, and that the resolution was apparently to just put a "favicon.ico" file in the template images folder ("/templates/cassiopeia/images/" for example).

However, this doesn't appear to work.

Investigating this through the resources loaded, the browser will fetch the favicon.ico I have placed in the aforementioned folder, but then will also fetch the joomla system favicon from "/media/system/images/joomla-favicon.svg". What's the deal, why does it fetch both, why does it go for one from the joomla system folder?

I don't really want to delete joomla-favicon.svg, is this standard practice?

Why is a custom favicon so obtuse with Joomla? Don't people normally want their own site icon?

[Jaydot]

I can't answer your "why" question.

But it seems you are using a browser (at least, I thinks it's the browser that determines the file type) that wants an svg instead of an ico file to show the favicon.
So you will need to add an svg version of your favicon to cassiopeia/images as well.

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.
Then add all three files to cassiopeia/images.

(Clear cache. It will work).

[teddy]

Hi, just to say that on Joomla! 4.1 assets have been moved to /media directory.
So if you want to display a custom favicon you have to upload it to:
/media/templates/site/your_template_name/images

[Jaydot]

... assets have been moved ...

+1 !

[teddy]

and don't go mad looking for the right spot to place it if you want to customize admin favicon as well, it goes under
/media/templates/administrator/your_template_name/images

[ceford]

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.

[korlarh]

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.