How to add a favicon to your experience pages

Show Losant
1

This guide shows how to add a favicon to your experience pages.

Step 1: Upload a favicon.ico to Files

You can name the file whatever you want, but the standard practice is to use favicon.ico.

image
image2072×692 57.1 KB

Step 2: Set favicon in your page’s HTML header

In the HEAD section in your page (or layout), add the following snippet:

<link rel="icon" type="image/x-icon" href="{{file '/favicon.ico'}}">

Here’s a longer example that shows where exactly the above snippet should be placed:

<!doctype html>
<html>
  <head>
    <title>Login | Kanarra</title>
    
    <link rel="icon" type="image/x-icon" href="{{file '/favicon.ico'}}">

    <link rel="stylesheet" type="text/css" href="{{file '/reset.css'}}">

  </head>
  <body>
   <!-- Bunch of HTML -->
  </body>
</html>

Once you save your page and refresh your browser, your favicon will appear:

image
image974×436 62.2 KB