Favicon not working

[Blackton]

I'm trying to get my favicon to appear, but nothing seems to work. I've tried all different tutorials and instructions, and many of them seem contradictory. For example, many places say it HAS to be in svg format, so I made an svg, but when I try to upload that into /media/template/site/cassiopeia/images, it says the format is invalid. The other files in there are all png, so I tried changing it to png, and it uploads, but still never shows up on the browser tab. Other places say it should be an .ico file, and that you need to replace some old files all over the place, but not even sure what an .ico file is...

Anyway, I've cleared the template cache and my browser cache multiple times, and tried all different things but can't seem to get anything to work, let alone to find any consistent explanations of how to do this. Any help is appreciated!

[ceford]

See this article: https://jdocmanual.org/en/jdocmanual?ar ... s/favicons

And not this in particular:

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

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

How are you trying to do the upload?

[Blackton]

In Joomla Admin Panel -> System -> Site Template Styles -> Cassiopeia Template -> New File -> select images folder and Browse for file, then hit Upload. That's the only way I could see to do it, and I *assume* this is what all the different instructions I followed when they say to "Upload" your favicon from that screen; I don't see an "Upload" option anywhere on that screen though, only the "New File" option, so I can only guess that's what they mean by "Upload," but maybe that is wrong? Anyway, let me know if this helps! Thank you!

[JAVesey]

Very recent thread on the same subject…

See this post/thread:
viewtopic.php?f=840&t=1015072#p3741192

"Search is your friend.”

[ceford]

Set the template options to include svg in the allowed file types.

[Blackton]

Hmm, that's strange that svg would be the only extension that works but that it is also not allowed! But I added it there in the System Media settings for both "Allowed Extensions" as well as "Legal Image Extensions." It still says "File format not supported"

[Blackton]

BTW, after reading that Inkscape may add some things to svg saves that cause Joomla to balk, I looked this up online and tried doing "Object to Path" and also "Clean Up Document," and then saved as "Plain SVG" instead of "Inkscape SVG." Doesn't make any difference. Still says, "File Format Not Supported."

[ceford]

Template Options, not Media Options. As it is a one-time operation most folk just use their OS tools to upload SVG icon files.

[Blackton]

OK, I added svg into the template options, and now it uploads! However, the favicon still isn't showing...any other ideas? Thanks!

[ceford]

Check that the icon works with a direct link:

Code: Select all

https://your.domain/media/system/images/joomla-favicon.svg

Browsers cache icons and it can be quite difficult to persuade them to use a new one. Try a hard page reload. Try different browsers.

[Blackton]

OK, I tried that, although I think the path is a little different, but either way, it won't load the page at all when I try to access it directly, even in different browsers.

[ceford]

Oops, your own svg favicon should be located at:

Code: Select all

https://your.domain/templates/site/cassiopeia/images/joomla-favicon.svg

[Blackton]

Yes, that is where it is, except I have it titled "favicon.svg" not "joomla-favicon.svg" But anyway, what does that mean that it can't even load by addressing it directly?

[Blackton]

hmm...I figured out why it wasn't loading directly! It seems it needed to be http, not https. So yes, it actually does load when referenced directly. So I guess I have two questions now:

1. How to get the favicon to load in the browser tab, given that it does load when referenced directly.
2. Why doesn't https work?

[ceford]

Have a look at the source of your site home page. Near the top you should find the favicon links. Mine look like this:

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

So there is no explicit use of http or https - that is inherited from the page url.

You should see the different route to your custom icons in your template.

[Blackton]

Yes, I do see the different route to the favicon icon in my template, but it's not using that route. When I check what it's actually using from the page source, it is like yours, "media/system/images." I'm not even sure how to get to that folder, as it doesn't appear in the site template section at all. What do I need to do to get it to use my favicon instead of the ones it is using?

[ceford]

It would be helpful to have your site url so we can fish for your icons. Did you rename favicon.svg to joomla-favicon.svg?

And as you seem to need a mix of https and http it might be a good idea to use the Forum Post Assistant and post the public results here.

[Blackton]

OK, I tried renaming it to joomla-favicon.svg, and...it worked! Thank you! I'm glad to have this actually working!

I don't see any way to delete the old files though. When I click on them to delete, it says, "The GD extension for PHP is not available. In order to manipulate images you need additional extensions installed on your server." Then it just links me to the manual, which isn't that helpful. I did go through all the extensions part of the manual but didn't see any sections relating to this, and I don't really want to read an entire manual just to delete a file. And anyway, I don't want to manipulate an image, I just want to delete it!

But in the meantime, it won't let me upload the correct image because it says an image with the same name already exists, but I can't delete the old one either. And I can't make one with a different name because it apparently has to be that exact name that you mentioned! I did find an old post by Mr. Berg from 16 years ago about this exact topic though, but looks really outdated now! I didn't realize this forum has been around for that long with the same people still helping out!

Anyway, is there just a simple terminal command I can use to get that extension that I need? Or some other simple way to be able to delete an image so I can replace it with one that is actually visible on a light background? Thanks!

[Blackton]

OK, per your suggestion in the other ticket, I found the folder using my file manager and just deleted the light favicon that way. It would still be good to be able to delete them from the admin panel though, in case I want to update my site remotely in the future, so if you know how to fix that bug, I would still appreciate it!

[ceford]

There is no need to delete the favicon images in media/system/images. Is that what you mean? Joomla will/may recreate them on the next update.

[Blackton]

There is no need to delete the favicon images in media/system/images. Is that what you mean? Joomla will/may recreate them on the next update.

But without being able to delete it, you will not be able to put a new one there.

[ceford]

That is the whole point! The favicons in media/system/images are the fallback favicons if your custom favicons cannot be found when Joomla outputs a page.

[Blackton]

Yes, but if there is no way to delete them, then it always WILL find and use the custom one that you don't want. So there does need to be a way to delete it.

[ceford]

There seems to be a misunderstanding here. Your own custom favicons should be located at:

media/templates/site/cassiopeia/images/joomla-favicon.svg
media/templates/site/cassiopeia/images/favicon.ico
media/templates/site/cassiopeia/images/joomla-favicon-pinned.svg

You put them there so you should be able to delete or replace them. If you delete them then the Joomla default icons will be used from media/system/images.