Generate Now

Joomla Favicon Complete Guide

Master Joomla favicons: upload via FTP or template settings, customize for all devices, troubleshoot common issues, and implement best practices for Joomla CMS.

Quick Start: Three Methods

Method 1: Root Upload (Easiest)

  1. Name file favicon.ico
  2. Upload to Joomla root directory
  3. Clear cache
  4. Done!

Method 2: Template Settings

  1. Extensions ? Templates
  2. Select active template
  3. Upload in template options
  4. Save & clear cache

Method 3: Manual HTML

  1. Upload favicons to /images/
  2. Edit index.php
  3. Add <link> tags
  4. Save template

Method 1: Root Directory Upload (Recommended)

Simplest Method - Works for All Templates

Step-by-Step:

  1. Generate favicon.ico: Create ICO file (16x16 and 32x32 combined)
  2. Access server: Use FTP client (FileZilla) or hosting file manager
  3. Navigate to root: Find Joomla installation root directory
  4. Upload favicon.ico: Place file in root (same level as index.php)
  5. Clear cache: System ? Clear Cache in Joomla admin
  6. Test: Visit site and check browser tab
Advantages:
  • Works with any Joomla template
  • No code editing required
  • Survives template changes
  • Standard browser behavior

File Structure:

/public_html/
  /administrator/
  /components/
  /images/
  /templates/
  favicon.ico    ? Upload here
  index.php
  configuration.php

Method 2: Template Settings (Template-Dependent)

Modern Templates with Built-in Favicon Options

For Templates with Favicon Settings:

  1. Log in to Joomla Administrator
  2. Go to Extensions ? Templates ? Styles
  3. Click on your active template (has star icon)
  4. Look for "Favicon" or "Site Icon" option
  5. Click "Upload" or "Choose File"
  6. Select your favicon image (PNG recommended, 512x512px)
  7. Click "Save & Close"
  8. Clear cache: System ? Clear Cache
Note: Not all Joomla templates have built-in favicon upload. Popular templates like Helix, T3, Gantry 5, and premium templates usually include this feature.

Method 3: Manual HTML Implementation

Full Control - All Sizes & Formats

Step-by-Step:

  1. Upload favicons: Upload all sizes to /images/favicons/
  2. Access template: Extensions ? Templates ? Templates (not Styles)
  3. Edit template: Click your active template name
  4. Edit index.php: Click index.php in file list
  5. Find <head>: Locate opening <head> tag
  6. Add favicon code: Insert HTML below (see example)
  7. Save template: Click "Save & Close"
  8. Clear cache: System ? Clear Cache

HTML Code to Add (after <head>):

<!-- Favicons -->
<link rel="icon" type="image/x-icon" href="<?php echo $this->baseurl; ?>/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="<?php echo $this->baseurl; ?>/images/favicons/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="<?php echo $this->baseurl; ?>/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="<?php echo $this->baseurl; ?>/images/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="512x512" href="<?php echo $this->baseurl; ?>/images/favicons/favicon-512x512.png">
<link rel="apple-touch-icon" sizes="180x180" href="<?php echo $this->baseurl; ?>/images/favicons/apple-touch-icon.png">
Pro Tip: Use <?php echo $this->baseurl; ?> for correct paths in Joomla. This ensures favicons work in subdirectories too.

Joomla Favicon Troubleshooting

Solutions:
  • Clear Joomla cache: System ? Clear Cache ? Check All ? Delete
  • Clear browser cache: Hard refresh (Ctrl+Shift+R)
  • Check file path: Verify favicon.ico is in root directory
  • File permissions: Set to 644 (rw-r--r--)
  • Wait 10-15 minutes: Server cache may need time

Fix:
  • Check template's index.php for existing favicon links
  • Remove or comment out conflicting <link> tags
  • Some templates hardcode favicon paths—override them
  • Check template settings for favicon options

Solutions:
  1. Clear Joomla cache completely
  2. Clear browser cache and cookies
  3. Test in incognito/private window
  4. Rename new file to favicon.ico (exact name)
  5. Check server caching (Cloudflare, etc.)
  6. Add version query: favicon.ico?v=2

Solutions:
  • File permissions: Ensure directory is writable (755)
  • FTP credentials: Verify correct username/password
  • Use hosting panel: Try cPanel File Manager instead
  • Check disk space: Ensure hosting has available space
  • Contact host: May have upload restrictions

Joomla Favicon Best Practices

? Recommendations

  • Use root upload: Most reliable method
  • Include .ico file: For old browser support
  • Add PNG versions: Better quality for modern browsers
  • Upload all sizes: 16x16, 32x32, 180x180, 192x192, 512x512
  • Clear cache: After every favicon change
  • Test all browsers: Chrome, Firefox, Safari, Edge
  • Backup template: Before editing index.php

? Common Mistakes

  • Wrong file name (must be favicon.ico)
  • Uploading to wrong directory
  • Not clearing cache after upload
  • Using only one size (not scalable)
  • Forgetting mobile icons (Apple Touch Icon)
  • Incorrect file permissions (should be 644)
  • Not testing on actual devices

Complete Joomla Favicon Implementation

Full Setup with All Sizes

Files to Upload:

File Size Location Purpose
favicon.ico 16x16, 32x32 /root/ Browser tabs (legacy)
favicon-16x16.png 16x16 /images/favicons/ Browser tabs
favicon-32x32.png 32x32 /images/favicons/ Browser tabs
favicon-96x96.png 96x96 /images/favicons/ High DPI displays
favicon-512x512.png 512x512 /images/favicons/ Ultra high resolution
apple-touch-icon.png 180x180 /images/favicons/ iOS home screen
android-chrome-192x192.png 192x192 /images/favicons/ Android home screen
android-chrome-512x512.png 512x512 /images/favicons/ Android splash screen

Complete HTML Code (for template index.php):

<!-- Standard Favicons -->
<link rel="icon" type="image/x-icon" href="<?php echo $this->baseurl; ?>/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="<?php echo $this->baseurl; ?>/images/favicons/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="<?php echo $this->baseurl; ?>/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="<?php echo $this->baseurl; ?>/images/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="512x512" href="<?php echo $this->baseurl; ?>/images/favicons/favicon-512x512.png">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="<?php echo $this->baseurl; ?>/images/favicons/apple-touch-icon.png">

<!-- Android Chrome Icons -->
<link rel="icon" type="image/png" sizes="192x192" href="<?php echo $this->baseurl; ?>/images/favicons/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="<?php echo $this->baseurl; ?>/images/favicons/android-chrome-512x512.png">

Generate Joomla-Ready Favicons

Create complete favicon package for Joomla with all sizes and formats

Generate for Joomla

Related Articles

WordPress

CMS alternative

HTML Code

Implementation snippets

Create Favicon

Design guide

An unhandled error has occurred. Reload đź—™