How to Add a Favicon in WordPress and Joomla

Contents6 sections

Look at the tabs open in your browser right now. Each one carries a tiny picture next to the page title. That picture is a favicon — short for “favorite icon.” It is the smallest piece of branding your site owns.

Your favicon shows up in more places than the tab. It sits next to your site’s name in bookmarks and favorites lists, and when a visitor saves your site to their phone’s home screen, it becomes the icon they tap, like an app. If you have never set one, visitors see a default instead — a plain globe, or the WordPress or Joomla logo. Here is how to add your own, on both platforms.

Prepare your icon file

You need one good source image: your logo, a single letter, or a simple symbol from it. Full logos with words rarely survive the shrink to tab size, so pick the boldest, simplest shape you have. The image must be square. From there, the two platforms ask for slightly different files:

• WordPress: one square image, at least 512 × 512 pixels. PNG is the safe choice; JPEG and GIF also work. WordPress generates every smaller size from that one image. Do not use an SVG file here — SVG is a vector format that scales without blurring, but WordPress does not accept it for the site icon by default.
• Joomla: a file named favicon.ico. ICO is the classic icon format, and one ICO file can hold several sizes at once — 16 × 16 and 32 × 32 pixels are the standard pair. Most image editors cannot save ICO directly, so export a square PNG first, then convert it with a free online favicon converter. The default Cassiopeia template also has an SVG option, covered below.

One tip: if you cannot tell what your image is at 16 pixels wide, simplify it now.

Add a favicon in WordPress

First, a naming note that saves real confusion: WordPress never uses the word “favicon.” It calls this the Site Icon, a built-in feature since WordPress 4.3. You do not need a plugin.

The current route: Settings → General

Since WordPress 6.5, the Site Icon setting lives on the General Settings screen. This route works on every theme — block themes and classic themes alike — so start here.

1. Log in to your WordPress dashboard.
2. Go to Settings → General.
3. Find the Site Icon setting, near the top of the page.
4. Click Choose a Site Icon.
5. Upload your square image, or pick one from the Media Library.
6. If WordPress shows a crop screen, adjust the square and confirm.
7. Click Save Changes at the bottom of the page.

That is the whole job. WordPress generates the smaller sizes and prints the right code into your pages by itself.

Classic themes: the Customizer route

On a classic theme, the same setting also lives in the Customizer:

1. Go to Appearance → Customize.
2. Click Site Identity.
3. Under Site Icon, click Select site icon and upload your image.
4. Click Publish.

If your Appearance menu shows Editor instead of Customize, you are on a block theme. Block themes hide the Customizer, which is why older tutorials send you looking for a menu that is not there. Use the Settings → General route above — it sets exactly the same thing. One more block-theme option: a Site Logo block in the Site Editor has a Use as site icon toggle that applies your logo as the icon too.

If you are still working on your theme itself, our guide to installing a WordPress theme from a ZIP file covers that side of setup.

Add a favicon in Joomla

Joomla handles this differently. There is no single site-wide icon setting in the administrator. Instead, the favicon belongs to your template — the design package that controls how your site looks. One consequence: if you switch templates later, you set the icon again for the new one.

First, check your template’s settings

Many templates give you a simple upload field, so look for it before you touch any files:

1. Log in to your Joomla administrator.
2. Go to System → Site Template Styles and open the style marked as your default — the one with the star in the Default column.
3. Look through its options for a Favicon field. It often sits near the logo settings.
4. If you find one, upload your image there and click Save.

If your template has no such field — the default Cassiopeia template does not — use one of the file methods below.

The file method: favicon.ico in the template folder

This is the method in Joomla’s own documentation, and it works with any template:

1. Prepare your favicon.ico file, as described above.
2. Connect to your site’s files, using an FTP program (software for moving files between your computer and your server) or your hosting control panel’s file manager.
3. Open the folder /templates/your-template/, using your template’s actual folder name — for Cassiopeia, /templates/cassiopeia/.
4. Upload your favicon.ico there, replacing the file already present. Keep a copy of the old file first, in case you want it back.

Joomla checks the active template’s folder for favicon.ico first, and your site’s root folder second.

Cassiopeia on Joomla 4 and 5: the SVG icons

Cassiopeia goes one step further. It asks the browser for three files, which Joomla ships in its system images folder:

• joomla-favicon.svg — the main icon, in SVG format
• favicon.ico — the fallback for browsers that do not use the SVG
• joomla-favicon-pinned.svg — a special version Safari uses for pinned tabs

Do not replace the files in the system folder — those are Joomla’s own files. Instead, place your versions in your template’s media folder, at /media/templates/site/cassiopeia/images/. Files there override the system ones, and your icon survives Joomla updates. For a complete change, put all three files in that folder. Other templates built the same way use the same pattern.

If you are still choosing or installing a template, add this to your setup checklist: a fresh template always starts with its default icon.

Make the new icon show up

You set the icon. The tab still shows the old one. This is normal, and it is the step that trips up almost everyone: browsers hold on to favicons longer than almost anything else on a page, on purpose, to save traffic — both platforms’ documentation warns about it. A plain refresh is often not enough. Work through these checks in order:

1. Hard refresh. Press Ctrl + Shift + R on Windows, or Cmd + Shift + R on a Mac, to fetch everything fresh, ignoring saved copies.
2. Test in a private window. A private or incognito window starts with an empty cache — the store of files your browser saves to load pages faster — so what you see there is what a new visitor sees.
3. Clear the browser cache if the old icon still sticks, then restart the browser.
4. Re-save the bookmark. Bookmarks keep the icon they were saved with. Delete the old one and add it again.
5. Purge your site’s caches. Clear your caching plugin if you use one. In Joomla, go to System → Clear Cache. If your site uses a CDN — a service that stores copies of your site closer to your visitors — purge the favicon there too. Caching is also one of the eight checks in our guide to speeding up WordPress.

One last wait is out of your hands: search engines pick up a favicon on their own schedule, so the icon beside your name in search results can take days to catch up with your tab icon.

Troubleshooting

• The old icon shows in my browser but the new one shows in a private window. Your setup is correct — your browser is still serving its saved copy. Clear the cache, restart the browser, and re-save any bookmarks.
• Nothing changed anywhere. Check the basics. In WordPress, did you click Save Changes (General Settings) or Publish (Customizer)? In Joomla, is the file named exactly favicon.ico, in lower case, in the folder of the template marked Default — not a different template’s?
• WordPress rejected my image. The usual causes are a non-square image that was never cropped, or an SVG file. Export a square PNG at 512 × 512 or larger and try again.
• Two icons seem to fight. Some themes and plugins add their own icon code on top of the platform’s. If your icon changes back and forth, check for a favicon field in a plugin or your theme, and use one method only.
• The administrator still shows the default. That is expected — the Joomla administrator and the WordPress dashboard use their own icons. This tutorial covers the icon your visitors see.

Wrap-up

That is the whole task. Prepare one square image. In WordPress, set it under Settings → General as the Site Icon. In Joomla, upload it through your template’s settings, or place favicon.ico in the template folder. Then give the caches a nudge and check in a private window.

Five minutes of work, and from then on your site introduces itself properly in every tab, bookmark, and home screen it lands on.