changing Favicons in j4 Topic is solved

[D0li]

sorted, the 2 svg file in the in /media/system/images folder caused the trouble

Cheers

[sillitoe]

I loaded a favicon to media/templates/site/cassiopeia/images (and tried a few other places too before that) and it works in Chrome and Edge, but not in Firefox. Is there a solution for that?

[sozzled]

See https://support.mozilla.org/en-US/questions/1103414

[sillitoe]

Thank you Sozzled. I removed the cookie and refreshed the page with "Ctrl + Shift + R", but it didn't help. I think I read somewhere that Firefox is looking for the favicon in a different place.

[ceford]

Did you look at the page source - you will see the favicon links near the top. Click on them - the two svg favicons will show as svg text. the ico icon will show as an icon.

[sillitoe]

Thank you ceford. There are 3 different ones:

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

However, the website is at https://alnu.lu/joomla4

Perhaps there is some problem with the relational links, though I don't understand how it will decide which favicon to display.

[sozzled]

Please post a list of all the files in the folder ../media/templates/site/cassiopeia/images and the dates that these files were created (or added).

[ceford]

Thank you ceford. There are 3 different ones:

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

However, the website is at https://alnu.lu/joomla4

Perhaps there is some problem with the relational links, though I don't understand how it will decide which favicon to display.

I can see the three icon links. The favicon.ico is a link to your own icon BUT it is an 'alternate icon' meaning it is a fallback for browsers that do not use svg icons. The one being displayed is joomla-favicon.svg.

You need to create your own svg icon and put it in media/templates/site/cassiopeia/image

See https://docs.joomla.org/J4.x:Favicons for information on how to create svg favicons.

[rgtr]

Hi

just tested on my pc.

Opera - shows an icon
Firefox = no icon
Chrome - shows an icon

Richard

[sillitoe]

Sorry, finally got it working. In the end, I used https://anyconv.com/ico-to-svg-converter/ to convert my .ico favicon to .svg, renamed it as joomla-favicon.svg, and put it in the media/templates/site/cassiopeia/images folder, as suggested. I'm still not sure if that's the correct procedure, because I would have thought that the name "joomla-favicon.svg" would be reserved for the Joomla favicon.

[sozzled]

The question was answered earlier:

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.

[newUsername]

Has the problem with favicons been resolved? They are not removed during the update?

[becyn1]

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.

I did a similar fix, but I renamed the joomla svg and ico files in media/system/images, then uploaded my favicon.ico to that same directory. The favicon now displays on Atum and Cassopedia
However, I think an update will put me back to square one.

I haven't figured out if it's possible to write an override to the icon selection code? is it possible?
So far i have only figured out how to successfully do a CSS override to the template...

[becyn1]

FYI to make svg files:
I found this gimp tutorial to be clear and to the point, unlike some other svg tutorials out there.
The only thing he doesn't make clear is that you have to type the svg extension at the end of the file name because the application doesn't add it automatically. Used this method on a B&W logo. It was quick and easy. i guess logos with complex color gradients might be trickier, but can also be done.

https://thegimptutorials.com/how-to-make-svg-file/

[becyn1]

I Had a little time today and curiosity got the best of me.
I downloaded a copy of Inkscape and gave it a test drive.
The app is very intuitive ,and easy to use.
On e the left hand menu , select 'other" . There are icon template sizes ready to select with out any setup.
I loaded my jpg logo in, selected "save as" and it was now in an svg icon format. It worked fine when I tested it. Almost too easy!