How to Change the Favicon in GoHighLevel: Dashboard, Funnels, and Websites

The favicon is the small icon that appears in browser tabs, bookmarks, and mobile home screens. It is one of those details that clients notice immediately -- if they see a generic or unfamiliar icon instead of your brand logo, it chips away at the professional, white-labeled experience you are trying to build.

GoHighLevel supports custom favicons across different parts of the platform, but the method varies depending on whether you are customizing the agency dashboard, a funnel page, or a website. This guide covers all three scenarios.

Why Favicon Customization Matters for Agencies

White-labeling is a core part of the GoHighLevel value proposition for agencies. You can rebrand the dashboard, set custom domains, and make the entire platform feel like your own product. But the favicon is easy to overlook, and it is one of the most visible branding elements in a user's browser.

Here is why it matters:

• Client trust. When your clients log into the dashboard and see your brand icon in their browser tab, it reinforces that they are using your platform -- not a third-party tool.
• Professional appearance. A custom favicon signals attention to detail. A missing or default favicon signals the opposite.
• Browser tab identification. Users often have dozens of tabs open. A recognizable favicon helps them find your platform quickly.
• Bookmarks and home screens. When clients bookmark the dashboard or add it to their phone's home screen, the favicon is the icon they see.

Favicon Specifications and Best Practices

Before you upload or set a favicon, make sure your image meets these requirements:

Technical Specifications

• Format: .ico, .png, or .svg are the most widely supported. PNG is the most practical choice for GHL.
• Size: 32x32 pixels is the standard for browser tabs. For best results across all devices, also have a 16x16 and a 180x180 version available.
• Shape: Square. Non-square images will be stretched or cropped.
• Background: Use a transparent background (PNG or SVG) unless your logo design specifically requires a solid background.
• File size: Keep it under 100KB. Favicons should load instantly.

Creating a Favicon from Your Logo

If you have a full logo but no favicon version, here are a few approaches:

• Use the logo icon only. If your logo has an icon/symbol component, isolate it. Full wordmarks do not work well at 32x32 pixels.
• Simplify. Remove fine details that disappear at small sizes. Bold, simple shapes work best.
• Test at actual size. View your favicon at 16x16 and 32x32 pixels before finalizing. If you cannot tell what it is, simplify further.
• Online generators. Tools like favicon.io or realfavicongenerator.net can convert an image into properly sized favicon files.

Method 1: Change the Favicon for the Agency Dashboard

The agency dashboard is what you and your team (and potentially your clients in a white-labeled setup) see when they log into GoHighLevel. Changing this favicon requires a JavaScript snippet added to the custom code settings.

Using Custom Code in Agency Settings

1. Log into your GoHighLevel agency account.
2. Navigate to Settings > Company (or Agency Settings depending on your plan).
3. Find the Custom JavaScript or Header Code section.
4. Paste the following script:

1<script>
2  (function() {
3    var faviconURL = 'https://yourdomain.com/path-to-your-favicon.png';
4
5    var link = document.querySelector("link[rel*='icon']")
6      || document.createElement('link');
7    link.type = 'image/png';
8    link.rel = 'icon';
9    link.href = faviconURL;
10    document.getElementsByTagName('head')[0].appendChild(link);
11  })();
12</script>
Copy

1. Replace the faviconURL value with the actual URL of your favicon image.
2. Click Save.

Where to Host Your Favicon Image

You need a publicly accessible URL for your favicon image. A few options:

• Upload to a GHL funnel or website. Add the image to any GHL page's media library, copy the image URL, and use that. This is the simplest approach since it stays within the GHL ecosystem.
• Your own website. If you have a company website, upload the favicon there and reference the URL.
• CDN or cloud storage. Services like AWS S3, Cloudflare R2, or any CDN will work. Just make sure the URL is publicly accessible and does not require authentication.

Avoid hosting on services that generate temporary URLs (some file sharing platforms do this), as the favicon will break when the URL expires.

Method 2: Change the Favicon for Funnels

Funnel pages built in GoHighLevel have their own favicon settings, separate from the dashboard.

Using Funnel Settings

1. Open the funnel in the GHL funnel builder.
2. Click on Settings for the funnel (gear icon or settings tab, depending on your builder version).
3. Look for the Favicon option under general or SEO settings.
4. Upload your favicon image or paste the URL.
5. Save and publish the funnel.

This method is built into the funnel builder interface and does not require any custom code.

Using Custom Code on a Funnel Page

If the built-in setting does not work as expected or you need more control, you can add the JavaScript snippet to a specific funnel page:

1. Open the funnel page in the builder.
2. Go to Settings > Tracking Code (or the custom code section for that page).
3. Add the same JavaScript snippet from Method 1 to the Header code area.
4. Save and publish.

This approach overrides whatever favicon the funnel would normally display.

Method 3: Change the Favicon for GHL Websites

GoHighLevel's website builder (separate from the funnel builder) also supports custom favicons.

Using Website Settings

1. Open your website in the GHL website builder.
2. Navigate to the site-level Settings.
3. Look for the Favicon field under general or branding settings.
4. Upload your favicon image.
5. Save and publish.

The website builder typically supports direct image upload for favicons, making this the most straightforward method.

Per-Page Favicon Override

In rare cases where you need a different favicon on a specific page (for example, a co-branded landing page for a partner), use the custom code method on that individual page to override the site-wide setting.

Troubleshooting Common Favicon Issues

Favicon is not showing up

• Browser cache. This is the most common issue. Hard-refresh the page with Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac). You can also try opening the page in an incognito window.
• URL is wrong. Open the favicon URL directly in your browser. If it does not load, the URL is incorrect or the image is not publicly accessible.
• Mixed content. If your site uses HTTPS (it should), make sure the favicon URL also uses HTTPS. Browsers block HTTP resources on HTTPS pages.

Favicon appears blurry

• Your image is too large and being scaled down aggressively. Start with a 32x32 pixel PNG that was designed at that size, not a large logo shrunk down.
• Use a dedicated favicon file rather than a full-size logo image.

Favicon reverts to default after a while

• If you are using the JavaScript method and the custom code gets cleared or overwritten during a GHL update, you may need to re-add it. Check your custom code section periodically.
• Make sure the hosting URL for the image is permanent. If you uploaded the image to a GHL funnel page that gets deleted, the favicon URL breaks.

Different favicon on different browsers

• Some browsers cache favicons aggressively. Clear the cache or test in a fresh browser profile.
• Ensure you are using a widely supported format (PNG or ICO). Some older browsers have trouble with SVG favicons.

Favicon not showing on mobile

• Mobile devices (especially iOS when saving to home screen) use larger icon sizes, typically 180x180 pixels. The 32x32 favicon may not display.
• For full mobile support, you may need to add an Apple Touch Icon. Add this to your custom header code alongside the favicon script:

1<link rel="apple-touch-icon" sizes="180x180" href="https://yourdomain.com/apple-touch-icon.png">
Copy

Quick Reference Summary

| Location | Method | Code Required? |

|---|---|---|

| Agency Dashboard | Custom JavaScript in agency settings | Yes |

| Funnel Pages | Built-in funnel settings or custom code | No (built-in) or Yes (custom) |

| GHL Websites | Built-in website settings | No |

| Individual Pages | Custom code on that page | Yes |

Wrapping Up

Changing the favicon is a five-minute task that makes a noticeable difference in how professional your white-labeled GoHighLevel setup looks. For the agency dashboard, use the JavaScript method in your custom code settings. For funnels and websites, use the built-in favicon settings that GHL provides in the builder interface, and fall back to custom code if you need more control.

Keep your favicon image hosted on a reliable, permanent URL, use a clean 32x32 pixel PNG with a transparent background, and test across browsers after making the change. It is a small detail, but it is one your clients will notice.