changing Favicons in j4 Topic is solved

General questions relating to Joomla! 4.x.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10
User avatar
Jaydot
Joomla! Guru
Joomla! Guru
Posts: 651
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

changing Favicons in j4

Post by Jaydot » Wed Jul 14, 2021 1:41 pm

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
You do not have the required permissions to view the files attached to this post.
Last edited by toivo on Tue Sep 28, 2021 8:53 pm, edited 3 times in total.
Reason: mod note: moved back to 4.x General Questions
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

User avatar
JTema
Joomla! Guru
Joomla! Guru
Posts: 733
Joined: Sun Apr 13, 2008 8:10 pm

Re: Favicons

Post by JTema » Fri Jul 16, 2021 7:08 am

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
http://www.joomlatema.net - Joomla Extensions and Templates
https://asgardia.joomlatema.net - Asgardia Joomla Gardening Template

User avatar
JTema
Joomla! Guru
Joomla! Guru
Posts: 733
Joined: Sun Apr 13, 2008 8:10 pm

Re: Favicons

Post by JTema » Fri Jul 16, 2021 7:28 am

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
You do not have the required permissions to view the files attached to this post.
http://www.joomlatema.net - Joomla Extensions and Templates
https://asgardia.joomlatema.net - Asgardia Joomla Gardening Template

User avatar
Jaydot
Joomla! Guru
Joomla! Guru
Posts: 651
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: Favicons

Post by Jaydot » Fri Jul 16, 2021 9:15 am

JTema wrote: Fri Jul 16, 2021 7:28 am... 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/.
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

User avatar
JTema
Joomla! Guru
Joomla! Guru
Posts: 733
Joined: Sun Apr 13, 2008 8:10 pm

Re: Favicons

Post by JTema » Fri Jul 16, 2021 10:10 am

Jaydot wrote: Fri Jul 16, 2021 9:15 am And wouldn't your solution also be overwritten on update?
It will not be overwritten.
http://www.joomlatema.net - Joomla Extensions and Templates
https://asgardia.joomlatema.net - Asgardia Joomla Gardening Template

User avatar
Jaydot
Joomla! Guru
Joomla! Guru
Posts: 651
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: Favicons

Post by Jaydot » Fri Aug 20, 2021 1:31 pm

JTema wrote: Fri Jul 16, 2021 10:10 am
Jaydot wrote: Fri Jul 16, 2021 9:15 am And wouldn't your solution also be overwritten on update?
It will not be overwritten.
Yes it will. In fact: it just did :)
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

sozzled
I've been banned!
Posts: 13639
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia

How to change the favicon in J! 4.x?

Post by sozzled » Fri Aug 20, 2021 7:45 pm

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?

User avatar
ceford
Joomla! Hero
Joomla! Hero
Posts: 2800
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: Favicons

Post by ceford » Sat Aug 21, 2021 5:19 am

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
I've been banned!
Posts: 13639
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia

Re: How to change the favicon in J! 4.x?

Post by sozzled » Sat Aug 21, 2021 6:05 am

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
I've been banned!
Posts: 13639
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia

Re: How to change the favicon in J! 4.x?

Post by sozzled » Sat Aug 21, 2021 9:02 am

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.

User avatar
ceford
Joomla! Hero
Joomla! Hero
Posts: 2800
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: Favicons

Post by ceford » Sat Aug 21, 2021 9:33 am

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
I've been banned!
Posts: 13639
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia

Re: How to change the favicon in J! 4.x?

Post by sozzled » Sat Aug 21, 2021 10:01 am

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

User avatar
ceford
Joomla! Hero
Joomla! Hero
Posts: 2800
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: Favicons

Post by ceford » Sat Aug 21, 2021 10:19 am

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
I've been banned!
Posts: 13639
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia

Re: Favicons

Post by sozzled » Sat Aug 21, 2021 10:25 am

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

sozzled
I've been banned!
Posts: 13639
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia

Re: How to change the favicon in J! 4.x?

Post by sozzled » Sat Aug 21, 2021 6:27 pm

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.""
ceford wrote: Sat Aug 21, 2021 10:19 amFactory::getDocument() should work too.
It doesn't work.

User avatar
brian
Joomla! Master
Joomla! Master
Posts: 12811
Joined: Fri Aug 12, 2005 7:19 am
Location: Leeds, UK
Contact:

Re: Favicons

Post by brian » Sat Aug 21, 2021 7:57 pm

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;
"Exploited yesterday... Hacked tomorrow"
Blog http://brian.teeman.net/
Joomla Hidden Secrets http://hiddenjoomlasecrets.com/

User avatar
brian
Joomla! Master
Joomla! Master
Posts: 12811
Joined: Fri Aug 12, 2005 7:19 am
Location: Leeds, UK
Contact:

Re: Favicons

Post by brian » Sat Aug 21, 2021 7:59 pm

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
"Exploited yesterday... Hacked tomorrow"
Blog http://brian.teeman.net/
Joomla Hidden Secrets http://hiddenjoomlasecrets.com/

sozzled
I've been banned!
Posts: 13639
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia

Re: Favicons

Post by sozzled » Sat Aug 21, 2021 8:05 pm

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

sozzled
I've been banned!
Posts: 13639
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia

Re: Favicons

Post by sozzled » Sat Aug 21, 2021 8:47 pm

Jaydot wrote: Fri Jul 16, 2021 9:15 am
JTema wrote: Fri Jul 16, 2021 7:28 am... 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.

User avatar
Maradona
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 154
Joined: Fri Aug 30, 2013 2:08 pm
Location: Argentina

Re: Favicons

Post by Maradona » Sat Aug 21, 2021 11:43 pm

ceford wrote: Sat Aug 21, 2021 9:33 am I have submitted an issue asking for the favicons to be made configurable.
Big Thank You! :laugh:

User avatar
ceford
Joomla! Hero
Joomla! Hero
Posts: 2800
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: changing Favicons in j4

Post by ceford » Sun Aug 22, 2021 9:08 am

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/

User avatar
Jaydot
Joomla! Guru
Joomla! Guru
Posts: 651
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: Favicons

Post by Jaydot » Sun Aug 22, 2021 12:24 pm

sozzled wrote: Sat Aug 21, 2021 8:47 pmI 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.
ceford wrote: Sun Aug 22, 2021 9:08 amSo 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 :).
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

User avatar
Maradona
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 154
Joined: Fri Aug 30, 2013 2:08 pm
Location: Argentina

Re: changing Favicons in j4

Post by Maradona » Sat Sep 25, 2021 7:05 am

ceford wrote: Sun Aug 22, 2021 9:08 am 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! :laugh: :)

GPooj
Joomla! Apprentice
Joomla! Apprentice
Posts: 17
Joined: Sun Aug 07, 2011 1:03 pm

Re: changing Favicons in j4

Post by GPooj » Tue Jan 25, 2022 12:51 pm

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?

User avatar
Jaydot
Joomla! Guru
Joomla! Guru
Posts: 651
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: changing Favicons in j4

Post by Jaydot » Tue Jan 25, 2022 1:14 pm

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).
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

teddy
Joomla! Apprentice
Joomla! Apprentice
Posts: 27
Joined: Fri Sep 16, 2005 12:29 pm

Re: changing Favicons in j4

Post by teddy » Thu Feb 17, 2022 4:24 pm

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

User avatar
Jaydot
Joomla! Guru
Joomla! Guru
Posts: 651
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: changing Favicons in j4

Post by Jaydot » Thu Feb 17, 2022 4:28 pm

teddy wrote: Thu Feb 17, 2022 4:24 pm ... assets have been moved ...
+1 !
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

teddy
Joomla! Apprentice
Joomla! Apprentice
Posts: 27
Joined: Fri Sep 16, 2005 12:29 pm

Re: changing Favicons in j4

Post by teddy » Thu Feb 17, 2022 6:07 pm

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

User avatar
ceford
Joomla! Hero
Joomla! Hero
Posts: 2800
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: changing Favicons in j4

Post by ceford » Thu Feb 17, 2022 6:22 pm

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
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Wed Feb 17, 2021 5:41 pm

Re: changing Favicons in j4

Post by korlarh » Thu Apr 14, 2022 10:48 am

ceford wrote: Thu Feb 17, 2022 6:22 pm 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.


Post Reply

Return to “General Questions/New to Joomla! 4.x”