Add a Favicon to Page Builder Pages

Pages
1

I get this question a lot so wanted to post the answer here –

How do I add a favicon for my page?

Note: In order to add a favicon using Page Builder, users will need to make sure that their favicon image is hosted online and accessible publicly. If you don’t have that, here’s what you can do

  1. It may already be hosted online and easy to find. Many websites host the favicon on the root folder. Try typing in “https://[[clientsite]].com/favicon.ico” (note: don’t include “www”) and seeing if the favicon pops up.

  2. If that still doesn’t work, you can try to find the favicon in the HTML of their main website by doing the following (see screenshot below):
    1. Navigate to the client’s main website (e.g. www.stockmanbank.com)
    2. Open developer tools (ctrl+shift+i or under “more tools” in Chrome)
    OPTION 1: Check the Network Tab
    a. Go to the Network tab
    b. Search for Favicon
    c. Hover over the results, and you should get the static URL to the image.
    OPTION 2: Check the HTML itself
    a. Go to the Elements tab
    b. Search for “shortcut icon”
    c. You may find something like <link rel="shortcut icon" type="image/png" href="YOUR_FAVICON_URL.png"/>
    d. The static image URL is underlined above, in quotes after href=
    e. In this case, you can copy the whole HTML element

Once you have the URL, you’ll need to update your Page Builder Template in Yext.

  1. Open the Settings tab for your Template or Single Page
  2. In the Add Code Snippets section, click Header HTML
  3. Add the following HTML snippet to the top of the Header HTML contents (if you’ve used option 2 above you can copy the formatting from the HTML element you found)

If the image is a png:

<link rel=****“shortcut icon” type**=“image/png”** href=“YOUR_FAVICON_URL.png”**/>**

If the image is an ico:

<link rel=****“shortcut icon” type**=“image/x-icon”** href=“YOUR_FAVICON_URL.ico”**/>**

For other formats, I think this should work (but please test it):

<link rel=****“shortcut icon” type**=“image/ico”** href=“YOUR_FAVICON_URL.ico”**/>**

​

  1. Click Save

​
Grab the favicon from the main website. Option 1 under Network

​image.png|650xauto​

Option 2: In the Elements tab

​Favicon in HTML under elements.jpg|650xauto