A favicon is a small icon that serves as branding for your application, normally when looking at the live view of your applications front-end, you will see the Betty Blocks icon as your favicon.

Favicons work best as simple images (Regularly 32x32 pixels in size). Favicons are not to be confused with logos but are sometimes the same. When creating a favicon yourself you could size down your logo, take a part of your logo or create a favicon yourself!

To change the favicon of your application you will need to contact support to gain access to the favicon component. After support has installed the favicon component in your application you can find it inside of your component set.

Drag the favicon component somewhere on your page. We recommend putting the component as high as possible in your page (or component tree), due to the way pages are loaded in on various browsers.

Within your favicon options, you need to provide an URL that will load in the image you would like to use.

We advise you to save the image you want to use as your favicon in the public files segment of your application (or on your own file server) this way the URL from the image will be less likely to change and will allow you to keep the same favicon no matter

You can create a new file by opening the public files section in the tools segment of your builder bar. Click ‘upload new file’ to upload your file, you can use any image file extension.
Give it a file name (such as “my_favicon”) to easily find your file in the overview, and then press save.

After saving your new file you can open the file record and view the link that navigates to your file. Copy the link and navigate back to the page with the installed favicon component. Select the favicon component and copy the file URL into your favicon URL input field.

Press the play/compile button to test the update to your favicon.

Repeat this for every page you would like to use a favicon on, or if you want to use the same favicon on every page you could also turn the favicon into a partial or add it to an existing partial you use on your pages.

Tip: also set the title of your page in your page settings to complete the look of your browser tab.