Adding a Logo and Favicon in Joomla 6

Written by: Thanh Le | 14 October 2025 | Hits: 802
3 min read
Adding a Logo and Favicon in Joomla 6

Branding your Joomla 6 website starts with a logo and a favicon. These small design elements help users recognize your brand instantly — on the website, in browser tabs, and even bookmarks.

1. What Are a Logo and Favicon?

  • Logo: The main image that represents your brand or website. It usually appears in the site header or top navigation area.
  • Favicon: A small icon (usually 16×16 or 32×32 pixels) that appears in browser tabs and bookmarks.

Both can be easily added through Joomla’s Template Style settings.

2. Preparing Your Images

Before uploading, make sure your images are optimized:

  • Logo: Use PNG, SVG, or WebP format. Recommended size: around 250×80 px.
  • Favicon: Use ICO, PNG, or SVG format. Recommended size: 32×32 px.

Keep file names simple and descriptive — e.g., site-logo.png or favicon.png.

3. Adding a Logo to Your Template

To set your logo:

  • Go to System → Site Template Styles.
  • Click on your active template (e.g., “Cassiopeia”).
  • In the Template Options panel, find the Logo setting.
  • Click Select or Upload to choose your image.
  • Save changes and refresh your site — your logo should now appear at the top of the page.

4. Adjusting Logo Position or Size

Depending on your template, you can often adjust how the logo is displayed:

  • Use the Template Options panel to align it (left, center, or right).
  • To fine-tune the size, open the template’s CSS file: 
    /templates/your_template/css/user.css
  • Add a simple rule like: 
    .site-logo img { max-height: 70px; }

Always create a user.css file (if it doesn’t exist) to keep custom CSS separate from core template files.

5. Adding a Favicon

To upload a favicon:

  • Go to System → Site Template Styles → [Your Template].
  • In the same Template Options area, find Favicon.
  • Click Select and upload your favicon file.
  • Save your changes.

Once added, clear your browser cache and refresh your site — the favicon should appear in your browser tab.

6. Replacing a Favicon Manually (Optional)

If your template doesn’t support favicon upload, you can replace it manually:

  • Upload your favicon.ico file to the root directory of your Joomla site.
  • Optionally, add this line inside the <head> section of your template file:
<link rel="icon" href="/favicon.ico" type="image/x-icon">

7. Testing Your Logo and Favicon

To confirm everything is working:

  • Visit your site on both desktop and mobile browsers.
  • Check the favicon appears in tabs, bookmarks, and mobile shortcuts.
  • Ensure your logo looks sharp and scales well on smaller screens.

8. Best Practices

  • Use an SVG logo for the best quality and performance.
  • Compress large PNG files to improve page load time.
  • Keep a transparent background for a clean, modern look.
  • Always back up your media folder before making changes.

9. Summary

Adding a logo and favicon in Joomla 6 is simple yet crucial for branding your website. These elements make your site recognizable and professional — essential for both visitors and search engines.

Next, we’ll learn how to customize your site further using Template Styles and Assignments.