How To Add Favicons To Pardot Landing Pages To Ensure Brand Consistency

This post is the second in our series on brand consistency. Read our guide to creating CNAME records in Pardot. 

Favicons are those small icons that appear in browser tabs. You have probably taken the time to customise the Favicon on your website pages, but what about your Pardot Landing Pages?

If you don’t add a favicon, your browser tab won’t be branded, and you lose an important opportunity to build trust and reinforce brand consistency.  

Look at my current open browser tabs. The last one is the Pardot Landing Page that I have just built:

Luckily it is really easy to add your favicon to your landing pages. 

  1. Upload a favicon file into Pardot by going to Marketing → Content → Files and clicking +Upload Files. Be sure to upload a .png or .ico. It’s a good idea to also create a vanity URL that is easy to remember. 
  2. Copy the link to the file. 
  3. Go into the Layout Template of your Landing Page. Click Edit.
  4. In the Layout Tab, add this code in thesection:
  5. Replace “Your_FILE_URL” with the link of your favicon file. 

See an example of how I have added this into the code below:

  1. Click Save Layout Template.

All of the landing pages using this template will now have the Favicon - see how mine looks below:

Now, what if you are using Stock Templates?

If you are working with landing pages created with Stock Templates, you can place favicon code in the Scripts section.

  1. Upload a favicon file into Pardot. It should be a .png or .ico file.
  2. Copy the file's link.
  3. Create or edit the landing page you want to add a favicon to.
  4. Click page options.
  5. Next to Scripts, click edit.
  6. In the Scripts box, add the this code:
  7. Replace YOUR_FILE_URL with the link to your favicon file.
  8. Click Done to close the Scripts box, then click DONE to close page options.

Your landing page will use your custom favicon.

NOTE: Since this is not a standard location for this HTML (the code added to the scripts section gets loaded at the bottom of the landing page), this may not work in all browsers. Because you cannot directly access the raw HTML of a stock landing page, this is the only place you can include this code in stock templates.

Source