The favicon is sixteen pixels of branding that punches far above its weight. It is what identifies your site in a row of browser tabs, in bookmarks, in history lists, and increasingly in search results. Launching a client site that still shows the template vendor's icon — or worse, the default Joomla logo — is the web equivalent of leaving the price tag on a gift.
Changing it in Joomla should be a two-minute job, and mechanically it is. What turns it into a support ticket is that Joomla templates load favicons from more than one possible place, and browsers cache favicons with a stubbornness they show almost nothing else. You replace the file, refresh, and the old icon grins back at you for days.
This guide covers the whole job properly: finding where your template actually loads the favicon from, replacing it, generating the sizes and formats modern browsers and devices expect, adding the right link tags to the template head, and — the part everyone underestimates — actually getting browsers to show the new icon.
Where Joomla loads the favicon from
There is no single favicon location in Joomla, which is the root of most confusion. Two places matter, and they compete.
The template folder
Joomla's page rendering looks for a favicon.ico inside the active template's directory and, if found, emits a link tag pointing at it. For a template named mytemplate, that file lives at:
templates/mytemplate/favicon.icoThis is why fresh installs and newly installed templates show a template or Joomla icon: the template shipped its own favicon.ico, and it wins because the page explicitly links to it.
The site root
Independently of anything Joomla does, browsers that find no favicon link in the HTML fall back to requesting /favicon.ico from the site root. A root favicon is the safety net — it also covers hotlinks, feed readers, and tools that fetch the icon directly without parsing your pages.
The reliable strategy is simply to do both: put your icon in the active template folder and in the site root. Two file copies cost nothing and eliminate the whole class of "which one is it reading" problems. Note also that some templates skip the automatic mechanism and hardcode their own favicon link in index.php or expose it as a template parameter — if replacing the files changes nothing even in a fresh private window, search the template's index.php for "favicon" or "icon" to see what it is really doing. Knowing your way around that file pays off across many jobs; our guide to Joomla template documentation covers how to read a template you did not build.
Step 1: prepare the icon files
Start from a square source image, ideally a simplified version of your logo — full logos with text turn to mush at small sizes. A bold mark, a single letter, or a distinctive shape reads far better at sixteen pixels than a shrunken wordmark.
Modern sites should ship a small set of sizes rather than one file:
- 16 by 16 and 32 by 32 — classic browser tab and bookmark sizes, bundled inside the
.icofile or provided as PNGs. - 180 by 180 PNG — the apple-touch-icon, used when someone saves your site to an iPhone or iPad home screen.
- 192 by 192 and 512 by 512 PNG — Android home screens and progressive web app manifests.
- An SVG icon — optional but increasingly worthwhile; it stays crisp at every size and can even adapt to dark mode with embedded styles.
You do not need design software for the conversion. Any reputable favicon generator will take one large square PNG and emit the full set, including a multi-resolution .ico. Generate once, keep the originals with the project files.
Step 2: replace the files via FTP or file manager
Connect with your FTP client or open your hosting control panel's file manager. Then:
- Identify the active template: in the Joomla administrator go to System, then Site Templates styles, and note which style is the default.
- Upload your new
favicon.icointo that template's folder, overwriting the old one. Keep a copy of the original if you may ever want it back. - Upload the same
favicon.icoto the site root, alongside Joomla's mainindex.php. - Upload the PNG set (180, 192, 512) and the SVG somewhere sensible — the template's
imagesfolder or the site's rootimagesdirectory both work; just be consistent.
Case matters on most servers: favicon.ico, all lowercase. And a filename trap worth naming: renaming logo.png to favicon.ico does not make it an ICO file. Some browsers forgive a PNG masquerading behind an .ico extension; others do not. Use a genuinely converted file.
Step 3: add link tags to the template head
The root fallback and the template auto-detection cover the basics, but explicit link tags give you control over formats and sizes. Open the template's index.php and add these inside the head section, adjusting paths to wherever you uploaded the files:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/images/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png">Browsers that understand SVG icons pick the SVG; older ones fall back to the ICO; Apple devices grab the touch icon. If you prefer not to edit template files directly — a reasonable instinct, since updates can overwrite them — check whether your template provides a custom-code or head-injection parameter, and put the tags there instead. Editing index.php is the same class of small template surgery as adding a new module position: harmless when done carefully, best done on a copy you can restore.
Step 4: fight the cache (and win)
Here is the part that generates the panicked "it didn't work" emails: you did everything right and the browser still shows the old icon. Browsers cache favicons separately from normal page assets, often for days or weeks, and a normal refresh frequently does not touch that cache.
Escalate through these steps until the new icon appears:
- Verify the file itself first. Load the icon URL directly —
https://www.example.com/favicon.ico— in a new tab. If the old icon loads there, your problem is server-side: wrong file, wrong location, or a server or CDN cache. If the new icon loads there, everything else is browser caching. - Hard refresh the page (Ctrl+F5 or Cmd+Shift+R). Sometimes sufficient, often not.
- Test in a private window or another browser. A private window has no favicon cache; if the new icon shows there, the job is done and your regular window will catch up on its own.
- Cache-bust the link tags. Append a version query string to the href in your link tags:
/favicon.ico?v=2. The changed URL forces browsers to fetch anew. Bump the number whenever you change the icon again. - Clear Joomla and server caches if the HTML itself is cached with the old link tags — Joomla's own cache, any caching plugin, and your CDN.
- Then wait. For visitors you cannot reach, browser favicon caches simply expire in time. Do not keep changing things once a private window shows the new icon; the fix is already live.
Format cheat sheet
| Format | Best for | Notes |
|---|---|---|
| ICO | Universal fallback | Holds multiple sizes in one file; still the safest baseline |
| PNG | Standard modern choice | One file per size; crisp and universally supported |
| SVG | Future-proof sharpness | Scales infinitely; supported by current major browsers, needs ICO fallback |
| Apple touch icon (PNG, 180px) | iOS home screens | Without it, iOS renders a screenshot thumbnail instead |
Favicons and template updates
One maintenance note before you close the ticket: a favicon placed inside the template folder can be overwritten when the template updates, because the update package ships its own favicon.ico. This is exactly the kind of site-specific fact worth recording in your project notes. If your template supports a child theme or protects a custom folder during updates, favor those locations. Either way, the site-root copy survives template updates untouched, which is one more argument for maintaining both. If you are working through a new free template, favicon replacement is the first stop on the customization list we outline in our look at free business Joomla themes.
FAQ
I replaced favicon.ico but the old icon still shows. Is something broken?
Almost certainly not. Load the icon's URL directly in a new tab: if the new image appears, the server side is done and you are looking at your browser's favicon cache, which can cling to old icons for days. Confirm in a private window, add a version query string to the link tag for good measure, and stop worrying. If the direct URL shows the old image, you replaced the wrong file — check the active template's folder and the site root again, and remember some templates hardcode a different path in index.php.
Do I really need all those sizes, or is one favicon.ico enough?
A single multi-resolution ICO covers browser tabs fine, and for a modest site it is a defensible minimum. The additions earn their place quickly though: the 180-pixel apple-touch-icon controls what iOS shows when someone saves your site to a home screen, and the larger PNGs feed Android and web-app contexts. Since a generator produces the whole set from one source image in under a minute, there is little reason to skip them.
Can I use an animated favicon or emoji as the icon?
Animated GIF favicons only work in a minority of browsers and are widely considered a nuisance, so we advise against them. An emoji-style icon is achievable via an SVG containing the glyph, which works in browsers that support SVG icons — fine for a personal project, rarely right for a business site. Whatever you choose, keep the ICO fallback in place so unsupported browsers still show something sane.
Does the favicon affect SEO?
Not as a ranking signal, but search engines do display site icons next to results, especially on mobile, and a missing or generic icon costs you a little recognition and trust at the exact moment a user chooses what to click. Make sure the icon is reachable, is a real image file, and is not blocked by robots.txt. Treat it as conversion polish rather than an SEO tactic.
The bottom line
Changing a Joomla favicon is genuinely simple once you know the two loading locations and respect the cache. Prepare a proper multi-size icon set, drop favicon.ico into both the active template folder and the site root, add explicit link tags for the modern formats, and verify in a private window rather than fighting your own browser's memory. Ten minutes of doing it thoroughly beats a week of wondering why the old icon will not die. For more small-but-mighty site fixes, browse the rest of our tutorials in the Joomla hub.