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