Adding a Logo and Favicon in Joomla 6

What you'll need	Details
Joomla version	Joomla 6.0 or later (screenshots below use Joomla 6.1)
Access level	Super User or Administrator, back-end login
Logo file	PNG, SVG, or WebP — transparent background, roughly 250×80 px
Favicon source image	A square image, ideally 512×512 px or an SVG, to feed into a favicon generator
File access	Joomla Media Manager, or FTP/File Manager for the images/ folder
Time needed	About 10–15 minutes

A logo and a favicon are the two smallest branding elements on your site — and two of the most visible. The logo sits in your header; the favicon lives in every browser tab, bookmark, and mobile home-screen shortcut. This guide covers both, using the default Cassiopeia template on Joomla 6.

Step 1: Prepare Your Logo and Favicon Files

Asset	Recommended format	Recommended size
Logo	SVG (best), PNG, or WebP, transparent background	~250×80 px
Favicon	ICO + SVG combo (Joomla 6 default set)	32×32 px for the ICO; SVG scales automatically

Step 2: Upload Your Logo via Site Template Styles

1. Log in to your Joomla Administrator back-end.
2. Go to System → Site Template Styles.
3. Click your active style — usually Cassiopeia - Default (or Cassiopeia Extended - Default if you're using the bundled child template — see Step 4).
4. In the Template Options panel, find the Logo field and click Select or Upload to choose your file.
5. Click Save & Close, then refresh the front end of your site.

Step 3: Generate a Complete Favicon Pack

Unlike the logo, Cassiopeia has no favicon field in Template Options. Joomla 6 expects three specific files rather than one image, so the fastest route is a favicon generator that outputs all three at once:

• A single-file favicon tool such as RealFaviconGenerator works if you only need an .ico quickly.

Whichever tool you use, make sure the export contains exactly these three files, since Joomla's default Cassiopeia lookup expects them by name:

joomla-favicon.svg
favicon.ico
joomla-favicon-pinned.svg

Step 4: Upload the Favicon Files to the Right Folder

1. In the Joomla Administrator, go to System → Templates: Site Templates.
2. Click Cassiopeia, then open Details and Files.
3. Navigate to the images/ folder.
4. Upload all three favicon files there, keeping the exact file names above.

Step 5: Use Cassiopeia Extended So Your Branding Survives Updates

Joomla 6.0 introduced Cassiopeia Extended, an official child template bundled with core, built specifically so color, font, and — usefully for this guide — logo/favicon overrides live in their own folder that plain Joomla updates never touch.

1. Go to System → Site Template Styles.
2. Switch your site's default style to Cassiopeia Extended - Default (or duplicate it if you want a separate style for a subsite/language).
3. Repeat Steps 2 and 4 above, but upload into the Cassiopeia Extended style and its own images/ folder instead of the parent Cassiopeia.

Step 6: Clear Cache and Verify

• Hard-refresh your browser: Ctrl + Shift + R (Windows/Linux) or Cmd + Shift + R (Mac).
• Or open DevTools → Network tab → tick Disable cache → reload.
• Clear Joomla's own cache: System → Clear Cache.
• If your site sits behind Cloudflare or another CDN, purge that cache from its dashboard too.
• Check the favicon in Chrome, Firefox, and Safari — rendering can lag by browser even after a hard refresh.

🧯 Common Mistakes to Avoid

• Looking for a favicon field in Cassiopeia's Template Options. It doesn't exist — the favicon is file-based, not a Template Options setting.
• Uploading only favicon.ico and skipping joomla-favicon-pinned.svg. A missing file makes Joomla silently fall back to its own default SVG.
• Uploading to the pre-4.1 path. templates/cassiopeia/images/ is legacy; Joomla 6 reads from media/templates/site/cassiopeia/images/.
• Editing the parent Cassiopeia directly. It works today, but a future core update can reset it — Cassiopeia Extended or a child template protects your branding.
• Skipping the CDN purge. A hard-refreshed browser can still show a stale favicon if Cloudflare or another CDN is serving a cached copy.

❓ FAQ

Does Cassiopeia have a favicon upload field?

No. Template Options only has a Logo field. The favicon is set by placing three specifically named files — favicon.ico, joomla-favicon.svg, joomla-favicon-pinned.svg — inside the template's images folder.

What size should my Joomla 6 logo be?

Around 250×80 px works well for Cassiopeia's header. Use PNG, SVG, or WebP with a transparent background so it sits cleanly on any header color.

Why isn't my new favicon showing up?

Almost always caching. Hard-refresh, clear Joomla's cache under System → Clear Cache, and purge any CDN (like Cloudflare) sitting in front of your site.

Will my logo and favicon get wiped out after a Joomla update?

Only if they're saved directly in the parent Cassiopeia template. Switching to Cassiopeia Extended, or creating your own child template copy, keeps them in a folder core updates don't touch.

Can I use just a PNG favicon instead of SVG?

You can, but you'll lose the crisp scaling SVG gives across tab sizes and retina screens. Joomla 6's own defaults use SVG for exactly this reason.

Where exactly does Joomla look for the favicon files?

media/templates/site/cassiopeia/images/ on Joomla 4.1 and later, including Joomla 6. Files there override Joomla's built-in defaults in media/system/images/.

➡️ What's Next

Once your branding is in place, template overrides are the next logical step for customizing how Cassiopeia displays your content without touching core files — worth exploring if you plan further front-end changes.

✅ Last verified on Joomla 6.1 — July 2026