The Joomla! site icon, or "favicon," is a 16-by-16 pixel image file that your browser displays in its address bar along with the site URL and on its tabs next to the site or page name. The Joomla! content management system accesses the favicon for display through the template by pointing at the specific address for the icon contained within the template. The default Joomla! icon is installed with the templates that come with Joomla!. You can install your own favicon to replace it.
Create a new favicon.ico image file. You can create a new favicon.ico file using a free favicon website or an image editor like Photoshop or GIMP, or you can scale an existing image to 16-by-16 pixels and save it as an .ico file.
Upload the new favicon icon file to the default template's directory located within your website's Joomla! directory structure. The template's directory is located in the "Templates" directory and has the exact name of your template.
For example, if you are using the "Beez" template, which is included in every Joomla! installation, the directory to place the new favicon.ico file is
If Joomla! was not installed into its own directory, the correct directory is
Rename the .ico file to "favicon.ico" using your FTP program or hosting company control panel. The filename should be entirely lowercase and spelled exactly the same as shown here but without the quotation marks.
View your site in your browser. If the new site icon is not displayed, you may have to to do a complete refresh. To do so, hold down the "Shift" key ("Cmd" on a Mac) while you click the refresh icon on Firefox or Safari. On Internet Explorer, hold the "Ctrl" key down while you click refresh. New visitors to your site will see the new favicon automatically. Returning visitors will have to do the full refresh to see the new icon.
Tips & Warnings
- Some templates redirect the icon location. View the index.php file in your template directory -- /joomla/templates/<insert template name>/index.php -- and look for the line that starts with <link rel="shortcut icon." The URL in that line gives the name of the favicon icon and its location. Just copy your favicon.ico file to that directory and rename it to the name given in the URL.
How to Remove the Site Name Text from the Joomla Header
Your Joomla website is looking good and you’ve added some great features, but your custom Joomla header still displays the site name,...
How to Replace Windows Icons
Icons are an essential part of the Graphical User Interface (GUI) of the Microsoft Windows OS. Icons are used to represent programs,...
How to Install a Favicon on Your Website
A favicon is a small icon that represents a website's branding. Most browsers display the favicon in the browser address bar next...
How to Remove Logos in an Address Bar
Modern browsers, by default, look for a "Favicon," or favorite icon, to be displayed by the URL in the address bar. This...
How to Add a Text Line in a Header for a Joomla! Template
The Joomla content management system comes with several built-in templates. Many others are available for free download. Some templates automatically display the...