A favicon is a small icon that appears next to the title of your page in browser tabs or bookmarks. Adding a favicon to your landing page can be a powerful way to reinforce your brand online.
Before You Start:
If you have an existing website that already has a favicon file, you might want to use it on your landing pages as well.
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, the favicon file is located here:
https://app.unbounce.com/favicon.ico
(For image file formats, PNG & JPG images can work as well.)
If you're having trouble locating the favicon.ico file, you may need to upload an image manually to an image hosting provider. See our article for more details about image hosting.
How to Add a Favicon in Classic Builder
To add a favicon to your landing page:
- Navigate to your page in Classic Builder.
- Click the “Page Properties” tab on the right side of your screen.
- Scroll down to the “Title & Meta Data” section.
- Click “Change Image” to open your Unbounce image library.
- Select your favicon and click “Choose.”
- Save and “Republish” your page.
That’s it! Your page should now display a favicon in the browser tab.
Manually Adding a Favicon Through Script
- Navigate to your page in Classic Builder.
- Click on the “Javascripts” widget on the editor's lower left-hand side.
- Add a new script and call it "favicon." Choose Head in the Placement dropdown menu and then paste in the following script:
<link rel="icon" type="image/x-icon" href="https://yoursite.com/favicon.ico" />
- Replace "https://yoursite.com/favicon.ico" with the URL of your own icon (keep the quotation marks).
- Save and "Republish" your page.
Pro Tip:
Creating a page with Smart Builder? You can easily upload a favicon image directly into Smart Builder, without using custom code! See our documentation to learn more: Updating Page Settings & Metadata in Smart Builder.