Favicon not showing for websites

Hi I am currently creating a new website and would like to add a favicon for it.

I already added the favicon to my branding kit (with the recommended size of 48*48 pixels in .png form) and set it as default.

However, it is still not showing up on any of my webpages or blogs.

I also read some past conversations on this topic and it was mentioned that the free version of HubSpot didn’t provide the customized favicon function in the past. Could this still be the case?

Hey @SPark_, thank you for posting in our Community.

I would recommend starting by ensuring that the favicon file is correctly named and placed in the root directory of your website. The standard filename for a favicon is “favicon.ico”. Although most modern browsers support PNG format, using the ICO format is still considered a best practice for compatibility.

Next, double-check the code in the <head> section of your HTML documents. If you’ve confirmed that the favicon file is correctly placed and linked in your HTML but still encountering issues, there might be caching problems. Try clearing your browser cache or testing in an incognito/private browsing window to see if the favicon appears.

To our top experts @Anton , @TomM2 and @Jigar_Thakker do you have any recommendations for @SPark_ matter?

Thank you,

Pam

Hi @SPark_,

there could be a few reasons for that.

1. Maybe your theme doesn’t support brand-settings. Can’t imagine that but who knows.
You can check this by navigating to your base.html/layout.html(might be called different) - most likely it’s located in THEME/templates/layouts/ but it might vary. Once you’ve found the file check the <head>-tag like @PamCotton mentioned for something like this

{% if site_settings.favicon_src %}
 <link rel="shortcut icon" href="{{ site_settings.favicon_src }}" />
{% endif %}

This code might work but since it’s not working for you - if this is even included, try changing it to

{% if brand_settings.primaryFavicon.src %}
<link rel="shortcut icon" href="{{ brand_settings.primaryFavicon.src }}" />
{% endif %}

If you have several brands, you can check the brand_setting inheritance documentation how to modify to several Favicons.

I’ve also checked my free account and I was able to set/change a favicon.

hope this helps,

best,

Anton

If your theme displays favicon as @Anton shows and your favicon is still not showing up, it may be a cache issue.

You can try opening your website in a different browser or in incognito mode to force a cache refresh.

Best regards,

Abraham Ernesto