Adding a Logo and Favicon in Joomla 6

Your logo and favicon are the two smallest — yet most powerful — branding elements on your Joomla 6 website. The logo anchors your header; the favicon lives in every browser tab, bookmark list, and mobile home-screen shortcut. Together they tell visitors "you're in the right place" before they read a single word. This guide walks you through both, step by step, with zero jargon.

What Are a Logo and Favicon — and Why Do They Matter?

A logo is the image (or image + text combination) displayed prominently in your site header. A favicon (short for favourite icon) is the tiny square icon shown in browser tabs, bookmarks, and OS shortcuts.

Step 1 — Prepare Your Image Files

Before you upload anything to Joomla, make sure your files are ready. A few minutes of preparation here will save hours of troubleshooting later.

Logo Requirements

• Use PNG, SVG, or WebP format.
• Aim for roughly 250 × 80 px — wide and short works best in most headers.
• Use a transparent background so the logo blends with any header colour.
• Keep file names simple: site-logo.png or logo.svg.
• Compress large PNGs with a tool like Squoosh or TinyPNG before uploading.

Favicon Requirements

• Joomla 6 / Cassiopeia loads three favicon files in this priority order:

joomla-favicon.svg        ← modern browsers (highest priority)
favicon.ico               ← legacy browsers
joomla-favicon-pinned.svg ← Safari pinned tabs / mask icon

Step 2 — Generate Your Favicon Files (Free Tools)

You don't need Photoshop or Inkscape. The following two free tools — built specifically for Joomla users — handle the heavy lifting for you.

Tool 1 — Favicon Generator

tools.jlvextension.com/favicon-generator/

Upload any square image (PNG, JPG, or SVG) and get back a ready-to-use favicon.ico plus an SVG version — perfectly sized and optimised.

Tool 2 — Favicons Pack Generator

tools.jlvextension.com/favicons-pack-generator/

Outputs all three Joomla-required files, correctly named, in one download. Drop them straight into the right folder — zero renaming.

Step 3 — Add Your Logo in Joomla 6

1. Log in to your Joomla Administrator back-end.
2. Go to System → Site Template Styles.
3. Click on your active template — usually Cassiopeia — Default.
4. In the Template Options panel, find the Logo field.
5. Click Select or Upload and choose your logo file.
6. Click Save & Close, then refresh your site front-end.

Step 4 — Change the Favicon in Joomla 6 (Cassiopeia)

Unlike the logo, Cassiopeia has no favicon field in the Template Options panel. You upload your favicon files directly to a specific folder.

Joomla Favicon Location (Joomla 6 / 5 / 4.1+)

media/templates/site/cassiopeia/images/
├── joomla-favicon.svg
├── favicon.ico
└── joomla-favicon-pinned.svg

Joomla checks this folder first. If your files are here they override the defaults in media/system/images/ and are not overwritten by Joomla updates.

How to Upload Your Favicon Files

1. Generate your pack with the Favicons Pack Generator.
2. Extract: joomla-favicon.svg, favicon.ico, joomla-favicon-pinned.svg.
3. In your Joomla Administrator go to System → Templates: Site Templates.
4. Click Cassiopeia Details and Files → navigate to images/ → upload all three files.
5. Clear your browser cache — the new favicon appears in the tab.

Bonus Tip — Use a Child Template to Stay Update-Safe

A Cassiopeia child template stores your overrides — logos and favicons — in its own directory that Joomla updates never touch.

1. Go to System → Site Templates → Cassiopeia → click Copy.
2. Set the new child template as Default.
3. Upload your files to media/templates/site/your-child-template/images/.

Troubleshooting — Favicon Not Updating?

• Hard-refresh: Ctrl + Shift + R (Windows/Linux) or Cmd + Shift + R (Mac).
• DevTools → Network → tick Disable cache → reload.
• Clear Joomla cache: System → Clear Cache.
• If using Cloudflare or another CDN, purge its cache from the dashboard.
• Verify all three favicon files are present — a missing joomla-favicon.svg causes Joomla to fall back to its own default SVG.

Final Checklist

• ✅ Logo is PNG/SVG/WebP with transparent background (~250 × 80 px)
• ✅ Logo uploaded via System → Site Template Styles → Cassiopeia
• ✅ Favicon pack generated with the free Favicons Pack Generator
• ✅ All three favicon files placed in media/templates/site/cassiopeia/images/
• ✅ Browser cache cleared — favicon tested in Chrome, Firefox, Safari
• ✅ Logo checked on mobile for legibility
• ✅ (Optional) Child template created for long-term update safety

Conclusion

Adding a logo and changing the favicon in Joomla 6 is straightforward once you know where Joomla looks for each file. The logo lives in Template Styles; the favicon lives in media/templates/site/cassiopeia/images/. Use the Favicon Generator for a quick single file, or the Favicons Pack Generator for a complete, correctly-named pack — both free, both fast.

A professional logo and crisp favicon are small details that make a huge impression. Take ten minutes today — your site will feel polished and trustworthy from the very first browser tab.

Written by

Thanh Le

Joomla Specialist & Technical Writer

Thanh Le is a Joomla expert and technical writer at Jlvextension.com, known for creating in-depth tutorials, extension reviews, and optimization guides. His work focuses on helping developers and website owners improve performance, security, and user experience in Joomla websites

FacebookTikTokEmail