Skip to main content

Changing the Favicon for the Joomla Administrator

The favicon is the small image display in your browsers tab-bar and in some search engines.  

If you have a lot of tabs open a favicon can help to navigate to the correct webpage.

While most front end websites have a setting to change the favicon, the default administrator template does not. However, it's pretty easy to change them using some rules in your .htaccess file.

Default Joomla Administrator Favicon

You will need to edit the .htaccess file that resides in the root of your installation. Usually you will need a FTP-client to access it, some hosting platforms have a file manager to edit files on your system.

Step one

Find the currently used links to the favicons. Right-click on a webpage and use 'view source' or similar. Look for lines with <link and icon. For the atum template they would look like:

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

Step two

Open the .htaccess file and find the section with:

RewriteEngine On

Step three

Below that, add the following lines, adjusting if your links are different.  

RewriteRule media/system/images/favicon.ico /favicon.ico [L]

And optionally

RewriteRule media/system/images/joomla-favicon.svg /safari-pinned-tab.svg [L]
RewriteRule media/system/images/joomla-favicon-pinned.svg /safari-pinned-tab.svg [L]

Save the file.

Viola

Reload the administrator, you might need to reload with CTRL + Shift + R or Command + Shift + R. Must browsers support CTRL - F5 as well.

Example of a Joomla Administrator Favicon

Frontend

The method depicted above works for the frontend as well. The default Joomla template 'Cassiopeia' for example uses the same paths as the administrator.

If the paths are different, you have to add those rules, as in the example above. In that case, you could create a different colored favicon for both parts.

Example of a Joomla Administrator Favicon

 

Creating favicons

you can create favicons with any image editing program. There are tools like realfavicongenerator.net to convert them into the different formats