Contact Info
No.17G, Olive Apartments Kakkanad , Kochi ,Kerala, India PIN - 682030
+919113115450
sales@hostinza.co.in
Recommended Services
Supported Scripts
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
.icofile (you can also use.pngor.svg, but.icois most compatible). - Name the file
favicon.icoorfavicon.png. - Recommended size:
32x32pixels or48x48for higher resolution.
📂 Step 2: Upload Your Favicon to the WHMCS Template Folder
- Login to your hosting account or cPanel.
- Navigate to the WHMCS installation directory, typically something like:
/public_html/whmcs/or wherever your WHMCS is installed. - Go to the template folder:
templates/six/(or your active template name). - Upload the favicon file here:
templates/six/favicon.ico
🔁 If you’re using the
Twenty-Onetemplate or a custom one, upload it to:templates/twenty-one/ortemplates/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.
- Go to your active WHMCS template folder:
templates/six/ortemplates/your-template-name/ - Find the file called
header.tpl - Open it and locate the
<head>section. - 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.
