How to Add a Custom Favicon in GoHighLevel

GoHighLevel does not give agencies a direct way to control the favicon. Your dashboard might show the default icon instead. Use custom code to add your own favicon. 

Your logo can appear in the browser tab instead. Your brand stays consistent across every page. Clients see your branding instead of GoHighLevel’s.

LeadsFlex tested this exact method in production accounts. It works. Here is exactly how we do it.

What Is a Favicon?

A favicon is a small icon in your browser tab. It also appears in bookmarks and browser history. For your GoHighLevel dashboard, it sits right next to your URL.

Clients see it constantly while they work. That icon is the first thing they associate with your platform. A custom favicon looks intentional and polished. A default icon looks like you did not care.

How This Method Works

Custom Favicon in GoHighLevel: Follow These Steps 

What You Need to Start

Step 1: Design Your Favicon

At 32×32 pixels, details disappear completely. Keep it very simple. Use one shape only. Your brand mark or monogram works best.

If your full logo has text, drop the text. Just use the shape. Test it in your image editor now.

Test your design:

Your favicon needs to work on both backgrounds.

Step 2: Export Your Image

For PNG (recommended): Use 8 bit color depth. Add transparency if your logo needs it. Export at 48×48 pixels. Name it favicon.png.

For SVG (if logo is simple): Remove all metadata and comments. Keep the file under 10 KB. Strip embedded styles you do not need. Name it agency icon.svg.

For ICO (older but supported): Export at 48×48 pixels. Ensure proper icon formatting. Name it favicon.ico.

Name your file something obvious. You will thank yourself when updating it later.

Step 3: Upload to GoHighLevel Media Library

Log in to your GoHighLevel agency account. Navigate to Funnels or Media Library. Find Media Library in the settings menu and upload your favicon image. Right-click the uploaded image and copy the address. You will get a URL like this:

https://media.leadsflex.com/image/v1/2024/01/abc123def456.png

Copy this URL now. You will need it in the next step.

Step 4: Access GoHighLevel Company Settings

Step 5: Paste the Custom Favicon Code

Copy this custom code exactly:

var faviconURL = ‘https://somefaviconurl.com’;

var link = document.querySelector(“link[rel*=’icon’]”) || document.createElement(‘link’);

link.type = ‘image/png’;

link.rel = ‘icon’;

link.href = faviconURL;

document.getElementsByTagName(‘head’)[0].appendChild(link);

Paste the code into the Custom Code area in Company Settings.

If other code already exists there, add yours at the bottom. Do not delete anything. Keep your formatting clean and organized. Each line should be separate. No extra spaces or tabs.

Step 6: Replace the Placeholder URL

var faviconURL = ‘https://somefaviconurl.com’

var faviconURL = ‘https://media.leadsflex.com/image/v1/2024/01/abc123def456.png’

Step 7: Save and Test

How the Favicon Code Works 

The JavaScript code runs in your browser when the page loads. It searches the page head for any existing favicon link. If it finds one, it updates the href to your custom image. If no favicon link exists, it creates one.

The browser then displays your custom favicon. It shows in your browser tab. The favicon persists as long as the code remains in Company Settings.

Why Your Favicon Is Not Showing

Browser cache is the most common reason a favicon does not appear after a change. An incorrect URL, code error, or platform update can cause this too.

Clear your browser cache first. Verify your image URL loads correctly. If the favicon still does not appear, check the troubleshooting section below. 

Clear Your Browser Cache

Your browser stores images and cookies. That is usually fine, but it can prevent your favicon from showing. Clearing it is the fastest fix.

Chrome: Go to Settings, Privacy and Security, Clear Browsing Data. Pick All time, check both Cookies and Cached images, then clear.

Firefox: Go to Settings, Privacy, Clear Data. Check Cookies and Cached web content. Done.

Safari: Click Menu, History, Clear History, All time.

Edge: Go to Settings, Privacy, Clear Browsing Data. All time, all options, clear.

Once that is done, hard refresh your browser. 

Close the tab, open a fresh one, and load your GoHighLevel dashboard again.

Testing Across Browsers

Troubleshooting

Favicon Does Not Appear

Paste your image URL into a new browser tab. If it does not load, the URL is wrong. Copy it fresh from Media Library. Check the browser console with F12 for red error messages. Clear your browser cache and reopen the dashboard fresh.

Favicon Appears Distorted or Blurry

You exported it at the wrong size. Re-export at 48×48 pixels and update the URL in the code.

Transparent Areas Show White Background

Re-export your PNG with transparency enabled. Test it locally in your browser first.

Code Saved But Favicon Not Working

Make sure you are in Company Settings, not in funnel settings. Wait a few seconds and refresh. GoHighLevel sometimes takes a moment to process new code.

Favicon Stops Working After GoHighLevel Update

Delete your code and paste it fresh from your saved copy. Clear cache and test in multiple browsers. If it still does not work, contact GoHighLevel support.

Long-Term Maintenance

Save your code

Copy your favicon code into a text file. Save it as ghl favicon code.txt. When GoHighLevel updates, you have it saved. No hunting for it later.

Document your image URL

Write down the Media Library URL of your favicon. If you need to change it later, you have the original.

Update after rebranding

New logo coming. Create a new favicon. Design it and export at 48×48. Upload to Media Library. Copy the new URL. Update the URL in your Company Settings code. Save and clear the cache. Test.

Test across all your accounts

If you have multiple GoHighLevel accounts or sub-accounts, test the favicon in each one. Favicon behavior may vary across GoHighLevel pages and dashboard areas. Test the pages your clients use most frequently.

Known Limitations

Favicon behavior may vary across GoHighLevel pages and dashboard areas. Some internal pages or admin areas may not display it. The majority of your client-facing pages will display it.

On slow connections, there can be a slight delay before the favicon appears. Browser extensions sometimes interact with favicons. Tab grouping extensions or color customizers might override your favicon. You cannot control this behavior.

FAQs

What size favicon should I use?

For a simple implementation, 48×48 PNG is a practical starting point. For broader browser and platform support, you can provide additional sizes such as 16×16, 32×32, and 48×48.

Can I use an animated GIF?

Animated favicons are not consistently supported across browsers and devices. Use a static PNG or SVG for reliable results.

Will this work in sub accounts?

The code runs at the Company Settings level. It affects your main agency dashboard. Sub account behavior depends on your GoHighLevel setup. Test it in your sub-accounts to verify behavior.

Why is my favicon not showing sometimes?

Browser cache is the most common reason. Clear it completely. If that does not work, verify your image URL loads directly in a new tab. If the image does not appear, copy the URL fresh from Media Library.

Should I use an external website URL

You can use external URLs, but we do not recommend it. Use GoHighLevel Media Library instead. External URLs can break or disappear. Media Library is stable and under your control.

Summary

Design a simple favicon at 48×48 pixels. Export it as a PNG. Upload to Media Library. Copy the URL. Paste the code into Company Settings. Replace the placeholder URL. Save and clear the cache. Test.

The basic setup only takes a few minutes once your favicon image and URL are ready.

If it works, save your code somewhere safe. If it does not work, work through the troubleshooting section. Need help. Contact support.

Your favicon is now updated in GoHighLevel. Your clients see your logo. They see it every time they log in.