[How-to] Add a Favicon to an Unbounce Landing Page


#1

One of the very first things I do when building any branded landing page is add an on-brand favicon.

For those that don’t know, the favicon is the little brand icon on the tab in your web browser that tells you what site that tab is showing. It adds an extra layer of trust and keeps things on-brand at the browser level.

This is a fairly simple thing to do using Unbounce, so we made a little how-to guide. :slight_smile:

chrome


Instructions

Click here for instructions

:rotating_light: WARNING: YOU ARE ENTERING DEVELOPER TERRITORY :rotating_light:

This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.

Step 1.

Find the location of your favicon.ico file. Usually it sits in the root directory of your website, so http://website.com/favicon.ico.

In our case it can be found at http://app.unbounce.com/favicon.ico. If you don’t have one, you’ll need to upload one to your own hosting (Unbounce does not currently support this).

Step 2.

Open your Unbounce page in the editor and click on the “Javascripts” button in the lower left hand side of the editor.

Step 3.

Add a new script and call it “favicon”. Choose “Head” in the Placement dropdown menu and then paste in the following:

<link rel="icon" type="image/x-icon" href="http://yourwebsite.com/favicon.ico" />

… of course replacing the “http://yourwebsite.com/favicon.ico” part with the URL of your own icon.

That’s it!

Re-publish your page and your icon should be in the browser address bar. :partyparrot:



Want to take your Unbounce landing pages + convertables to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks


Favicon When CNAME is pointing to UnbouncePages?
Requesting landing page feedback. All feedback greatly appreciated
Landing Page Feedback for an eBook
Requesting feedback on landing page both versions mobile & desktop
Help to improve the quality and number of conversions
No conversions on my landing page yet
Lawn Maintenance Landing Page
#2

:heart_eyes: :heart_eyes: :heart_eyes: :heart_eyes: :heart_eyes: :heart_eyes: :heart_eyes: :heart_eyes: :heart_eyes: :heart_eyes: :heart_eyes: :heart_eyes:


#3

+1 - Crucial for creditability!


#4

lol … crucial eh? …


The Ultimate List of Unbounce Tips, Scripts & Hacks
#5

Hello,
How do I find the location of my favicon.co file? If it is in the root directory of my website, where would I find the root directory of my website? I am using a wordpress theme that allowed me to upload a 16x16 .png in the ‘Theme Options’ to use as a custom favicon…sorry, I don’t know where to find the favicon.ico file. Thank you!


#6

Dang, never thought “favicons” for landing pages. How did I miss this?


#7

Hi @Laurie,

If you are sure the favicon has been placed in the root directory of your WP installation than it most probably can be found at: https://www.awesome-website.com/favicon.ico

However, sometimes themes put the favicon in their own theme directory like so: /https://www.awesome-website.com/wp-content/themes/awesome-theme-name/favicon.ico

Last but not least, you can just right click on your blog. Bring up the “View Source” and search for the favicon.

Best,
Hristian


#8

Thank you so much Hristian! I was able to find it by enabling the Developer menu and and bringing up “View Source” as you suggested.

Thank you, thank you!


#9

How do you do this in the new 2017 UI? There’s no placement dropdown menu to select “Head” as step 3 directs. Can you please share how to do this without the dropdown menu? Thanks!


#10

Somebody know how to find the favicon.ico in Shopify ?


#11

I view the page source, it’s here:
link rel=“shortcut icon” type=“image/x-icon” href="//cdn.shopify.com/shopify-marketing_assets/static/shopify-favicon.png"


#12

Thanks for posting this! Just a note: The code in the instructions is missing the second quote mark, resulting in invalid javascript.


#13

It works. Thanks!