Hostinza

Get 50% Discount Offer 26 Days

Client LoginSignup

Contact Info

No.17G, Olive Apartments Kakkanad , Kochi ,Kerala, India PIN - 682030

+919113115450

sales@hostinza.co.in

Recommended Services
Reseller Hosting
WordPress has grown
WordPress Hosting
Seamlessly transform dynamic
Supported Scripts
WordPress
Hubspot
Joomla
Drupal
Magento
MySQL
Python
HTML
WHMCS

How to Add Favicon in WHMCS Templates: A Step-by-Step Guide

admin
 August 29, 2022 147 Comments

When it comes to web presence, even small branding elements like a favicon (the little icon shown in browser tabs) can make a big difference in brand recognition and trust. If you’re running a hosting business or providing domain registration services using WHMCS, adding your brand favicon can help create a more professional look.

In this blog, we’ll walk you through the simple process to add or change a favicon in your WHMCS template — whether you’re using the default template (Six, Twenty-One) or a custom design.

🔍 What is a Favicon and Why is it Important?

A favicon is a small square icon (typically 16×16 or 32×32 pixels) displayed next to your site name in browser tabs, bookmarks, and history lists. It plays an important role in:

  • Improving brand visibility
  • Making your site look professional
  • Helping users quickly recognize and return to your site

🚀 Steps to Add a Favicon in WHMCS

📁 Step 1: Prepare Your Favicon File

  • Use an image editor or favicon generator to create a .ico file (you can also use .png or .svg, but .ico is most compatible).
  • Name the file favicon.ico or favicon.png.
  • Recommended size: 32x32 pixels or 48x48 for higher resolution.

📂 Step 2: Upload Your Favicon to the WHMCS Template Folder

  1. Login to your hosting account or cPanel.
  2. Navigate to the WHMCS installation directory, typically something like:
    /public_html/whmcs/ or wherever your WHMCS is installed.
  3. Go to the template folder:
    templates/six/ (or your active template name).
  4. Upload the favicon file here:
    templates/six/favicon.ico

🔁 If you’re using the Twenty-One template or a custom one, upload it to:
templates/twenty-one/ or templates/your-template-name/

🖊️ Step 3: Edit the Header Template File

To let browsers know where your favicon is, you need to insert a link in the HTML <head> section.

  1. Go to your active WHMCS template folder:
    templates/six/ or templates/your-template-name/
  2. Find the file called header.tpl
  3. Open it and locate the <head> section.
  4. Add the following line inside the <head> tag:
htmlCopyEdit<link rel="icon" type="image/x-icon" href="{$WEB_ROOT}/templates/six/favicon.ico">

Make sure you update the path if your template name is different.

If you’re using a .png favicon instead of .ico, update the line to:

htmlCopyEdit<link rel="icon" type="image/png" href="{$WEB_ROOT}/templates/six/favicon.png">

🔄 Step 4: Clear Cache and Test

  • Clear your browser cache or open the WHMCS client area in incognito/private mode.
  • Visit your WHMCS URL and verify that the new favicon appears in the browser tab.

If it doesn’t show up immediately, wait a few minutes or try refreshing with Ctrl + F5.

💡 Bonus Tips

  • Add multiple favicon formats and sizes for different devices:
htmlCopyEdit<link rel="icon" href="favicon.ico" sizes="32x32" type="image/x-icon">
<link rel="icon" href="favicon.png" sizes="192x192" type="image/png">
  • For Apple devices, you can also include:
htmlCopyEdit<link rel="apple-touch-icon" href="apple-touch-icon.png">

📌 Final Thoughts

Adding a favicon in your WHMCS template is a quick but impactful way to reinforce your brand identity. It not only enhances your client area visually but also increases credibility with users.

Whether you’re using the built-in Six or Twenty-One template or a fully customized one, the process is straightforward and takes just a few minutes.

Want WHMCS customization without the hassle?
👉 Contact Hostinza for expert WHMCS setup, branding, and optimization services.

Share this Post
Tags:

147 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

WordPress and WHMCS integration by i-Plugins