Favicons (short for “favorite icons”) are small square images, usually 16×16 pixels, located on the left side of a web browser’s address bar to represent the web page being visited. These favicons enhance the customer experience of your website by making your branding more cohesive. And if you’re wondering how to add a favicon to your ClickDimensions landing page, this blog post has you covered.

To begin with, you will need a 16×16 pixels icon that you wish to set as the favicon. In this example, we will be using this ClickDimensions icon as our favicon:

You will then need to host the favicon icon on your site or via an image hosting service. This will give you an image URL, which you will use to bring the icon into your landing page template.

Once you have generated the image URL for your icon, you can begin working in the ClickDimensions landing page designer of your choosing. Below are instructions for both the Free Style and Block landing page editors.

Free Style Landing Page Editor

If you are using the Free Style landing page editor, you will need to click the Source button in the editor to access the landing page’s HTML.

Favicon 1

You will then place the code shown below between the <head></head> HTML tags in your Landing Page HTML to set the favicon.

<link

href=”http://i.imgur.com/gKduAcl.jpg”

rel=”icon” type=”image/jpg” />

<link

href=”/favicon.ico” rel=”shortcut icon”

type=”image/x-icon” />

You will need replace the image URL we used (http://i.imgur.com/gKduAcl.jpg) with the URL of your image.

Block Landing Page Editor

If you are using the Block landing page editor, you will need to click Page > Add External Resources in the editor to access the landing page’s header and footer.

Favicon 2

You will then place the below code in the Header box of the Add External Resources window in your landing page to set the favicon.

Favicon 3

<link

href=”http://i.imgur.com/gKduAcl.jpg”

rel=”icon” type=”image/jpg” />

<link

href=”/favicon.ico” rel=”shortcut icon”

type=”image/x-icon” />

You will need replace the image URL we used (http://i.imgur.com/gKduAcl.jpg) with the URL of your image.

Once you have placed this code in the header of your ClickDimensions landing page and saved your template, you can navigate in the landing page editor to Embed > Embed as Link, and click the link provided to open your landing page on a live webpage.

Favicon 4

You will then be able to see the favicon in the address bar.

Please note that ClickDimensions does not offer support for custom coding. This is an example of how to insert a favicon into your landing pages. If you need support with any custom coding, we recommend that you reach out to a web developer for assistance.