Home | Landing Pages | How to Add a Favicon to ClickDimensions Landing Pages

How to Add a Favicon to ClickDimensions Landing Pages

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.

2017-05-19T19:38:24+00:00 By |Landing Pages|4 Comments

About the Author:

mm
Kellany Mathis is a ClickDimensions Marketing Success Manager.

4 Comments

  1. LeoM January 26, 2017 at 8:40 am - Reply

    Hello, Could you please help me add Favicon.ico to my Web Forms? The Code Editor has HTML as “read only”, and the HTML Header of the Design Editor doesn’t show any tag.

    Is there a JavaScript code I could use, or how can I edit my Forms?
    Thanks.

  2. ClickDimensions January 28, 2017 at 2:40 pm - Reply

    Hi LeoM – The best option would be to embed the form into a ClickDimensions landing page, then add the favicon code there. This post explains how: http://blog.clickdimensions.com/2016/11/how-to-add-a-favicon-to-clickdimensions-landing-pages.html. Thanks!

  3. Ashley August 2, 2017 at 5:21 pm - Reply

    Hello, I’ve gone through these steps to try to add a favicon to a landing page and I cannot seem to get it to work. Is it possible to use an image hosted through ClickDimensions? That is what I have been trying using the link from the image links page. I did also try hosting on Imgur, as shown in the example, and still no luck. The image I want to use is a PNG, so I also tried changing the code to say png instead of jpg, and still had no luck. I also tried with a CD hosted jpg image, also no luck. Any guidance is appreciated. Thanks!

    • mm
      ClickDimensions Marketing August 8, 2017 at 1:10 pm - Reply

      This linking process does work with .png files when you change the type to “image/png.”

      You can host your favicon image via the ClickDimensions image manager. However, you cannot utilize the image manager when accessing the source code in the freestyle editor or the external resources in your block editor. You’ll need to get the image’s location beforehand. To get the image’s source URL, where it is hosted by the ClickDimensions image manager, you could simply do the following:

      1. Upload the file to the image manager
      2. Insert the image in the body of your landing page
      3. Right click on the image and choose View Image Properties
      4. Gather the image’s source URL
      5. Remove the image from the body of your landing page

      Then you can enter that image source URL in your code.

      The most common reason we see the code from this article not work is because customers may have directly copied the code from this page, rather than typing it into the Source code or Header area by hand.

      The quotation marks in our article are curled quotes, intended for writing. Code, like your CRM’s landing page editor, necessitates utilize straight quotes. Quotes written into the editor will be straight, but if you paste in quotes from another site, like our article, where they are curled the quotes in your code editor will be curled.

      If you pasted the code from the article, please try manually typing the code from our article into your landing page’s editor.

      If you continue to have difficulty with the steps in this article, please feel free to open a support ticket where our team can assist you further.

Leave A Comment