Unlike some templates, the default Cassiopeia template in Joomla 4
has no option in the style settings to change the favicon, and at the
time of writing they haven't included this in the documentation.
Thankfully, changing the favicon from the default Joomla icon to your own custom icon is fairly simple.
Option 1: Use Phoca Favicon
Phoca Favicon
is a free extension you may install which makes it easy to change the
favicon, with any template. Since Cassiopeia doesn't readily provide
this functionality in its settings, this is probably the easiest way to
achieve it.
With Phoca Favicon, simply install the component. The component is very
easy to use. You just click "create favicon," select the template you're
using, upload your image, and click "Create." That's it.
Option 2: Place Favicon In System Images Folder
Simply take your favicon file, name it favicon.ico, and overrite the old image at: yoursite/media/system/images
So it should be... yoursite/media/system/images/favicon.ico
You will have to do this through FTP or your web host's file manager,
as you cannot get to the template folder from Joomla's built in media
manager. You could also change your media manager to point to the root
directory, but I wouldn't recommend this for security reasons.
That will get the favicon displaying properly. However, if you want to fully change the favicon, there are a few more steps you need to take.
3 Favicon Files
Ideally, your source favicon.ico file should be an SVG (vector) file.
The way Cassiopeia is currently set up, it actually links to three
different favicon files.
- favicon.ico
- joomla-favicon.svg
- joomla-favicon-pinned.svg
Initially, it pulls these images from yoursite/media/system/images. If you place the same files under yoursite/media/templates/site/cassiopeia/images, the files under the templates directory are used in lieu of the system directory.
So if you want to fully replace all 3 files, you need to place your favicon.ico under yoursite/media/system/images as discussed before. You must also create SVG versions of your favicon and place them under yoursite/media/system/images with the filenames joomla-favicon.svg and joomla-favicon-pinned.svg
Cache Issue
If you replace the favicon and don't notice any changes, it's likely
because your browser has cached the old version. If you're unfamiliar
with caching, it relates to performance. You need to clear your browser
cache.
If you're using a Chromium based browser, just right click the page,
select "inspect" to open dev tools, navigate to the "Network" tab at the
top, and click the little "Disable cache" checkbox. Reload the page and
see if that resolves the issue.
If that doesn't work, you may have to clear the Joomla system cache, the
cache through your web host's performance options, or the cache through
your CDN (if you use something like cloudflare). Alternatively, just
wait a few hours and see if it changes by itself.
Don't Know How To Make a Favicon?
If you don't know how to make a favicon file, you can use a tool like favicongenerator
to generate it for you. Simply upload your square image file to
favicongenerator, save the generated ico file as favicon.ico, and follow
the above instructions.
Updated 3/2/22 to reflect location of the favicon as of Joomla 4.1 - If
you're using an older version, the favicon is located in
yoursite/templates/cassiopeia/images
While it's not our job to provide a free, surrogate website development
service—this forum is a self-help resource where we point people in the
right direction (we hope) where they can find the answers to their
questions—if you're stuck and have a specific question then please start
a discussion topic about that matter and we'll do what we can. I hope
this general answer to your general question helps.
