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.
If you have an existing website that already has a favicon file (the logo that shows up in the browser's address bar, and next to the site's title when a user bookmarks it), then 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 at http://app.unbounce.com/favicon.ico.
If you're having trouble locating the favicon.ico file, you may need to upload an image manually to an image hosting provider. Read more about image hosting in the latter portion of this article. - Navigate to the Unbounce Builder for this page, and 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).
- That's it! Republish your page, and your icon should be in the browser address bar.
For image file formats, PNG & JPG images can work as well.
Image Hosting & URLs
When adding in the image URL of your favicon, you will need to ensure that the image is uploaded to a server; in other words, host your image.
If you have an image saved on your computer/laptop, you can ask your IT team to host the image on your company’s server. A quicker option would be to upload it to a hosting service such as Amazon Web Services, Flickr, or Imgur.
You can use either service to upload your image to their server and generate a custom image URL to use as a favicon.
Once you’ve hosted your image on a server, you will need to Open the Image in a New tab, and use the specific image URL to add within the builder, as shown in the above example.