Skip to main content
All CollectionsTips and tricks
How to add a favicon to a landing page
How to add a favicon to a landing page

Adding a favicon to a ConvertFlow landing page

Mariana avatar
Written by Mariana
Updated over 7 months ago

Although ConvertFlow doesn't currently have a native feature to add a favicon to a landing page, there is a custom code that can be used to make sure landing pages display the website logo.

Since this solution requires access to the landing page's script manager, only customers on paid plans will be able to implement this feature.

Get the image address

Start by getting the website logo image address, this means the image needs to be hosted online. If the logo is on the website, the image address can be copied when right-clicking over the logo:

If the image isn't already hosted on the site, there are free image hosting websites where the logo can be uploaded and the image address will be provided. Some that have worked are Postimages.org and ImgBB.

Make sure that the address being used is always the direct image source link, which would look something like this:

Add the favicon custom code

Once the image address is available, head to the website settings to access the global landing page script manager:

Then, add the script below to the code window:

<script>
var callback = function(){
var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = 'https://i.ibb.co/ph5V8py/FlowyAi.png';
document.getElementsByTagName('head')[0].appendChild(link);
};


if (document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll)) {
callback();
} else {
document.addEventListener("DOMContentLoaded", callback);
}
</script>

Once the code is in the window, the "link.href = 'http://yourwebsite.com/favicon.ico'" will need to be replaced with the image address like this:

link.href = 'https://i.ibb.co/ph5V8py/FlowyAi.png'

Finally, save the edits at the bottom of the window to ensure the favicon is added to all existing and new landing pages created on that website:

If the favicon only needs to be added to a single landing page, the same code with the image address can be added to the specific landing page's script manager:

Did this answer your question?