After reading this article you’ll know the following:

As you’re preparing to go live with your application, some of the tiny (but important!) things will need to be covered. For example, you will have to set up titles and icons across your end product to make sure it’s recognizable and remembered among multiple open tabs on your users’ browsers.

When creating a new page, you are required to type in the page name and path for it. The page name here is used only internally in the page builder, that is across the building environment. The page path is a part of your URL and refers to the exact location of this page.

Naturally, you can change those later, as well as set your page title - the name that will be visible in the tab of a browser. This title is also shown by search engines (like Google or Bing). Keep it short and clear: the most important is the first word as most likely it will be visible in user browsers among other open tabs.

To find page settings, simply click on the tab with the cogwheel icon when on the page (in the page builder) you want to change. Here you’ll see three top fields with the above-mentioned names.

Note: In case you want to change a default page title and description for your application, find out how in Applying general settings for your application article.

Just below the page path name, you can see the SEO description - a short snippet of text summarizing the content of the page which can be found by search engines. Effective SEO (also called ‘meta description’) description should provide a concise and compelling summary of your page content, inform users about what they can expect from this page, and include relevant keywords (like ‘customer reviews’, ‘leave feedback’, etc.). Try to keep it short, as the limit is 32 words.

If you want to use a component set you’re running locally, switch to ‘Local’ below. In case the domain is already running locally on your computer, you can select ‘Custom’ and manually type in what location you wanna look for.

Choosing an authentication profile here only handles redirects to the login page for whoever enters the current page. It does not secure your data in any way, but you can choose the profile that you want to be able to access the page, or even create a new profile from scratch.

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

Favicons work best as simple images (usually 16x16 or 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!

The favicon sizes are as follows:

When creating a favicon, take into consideration the file types you need: SVG, PNG, JPG, and Windows ICO. The icon/image needed should be at least 70 pixels large (recommended: at least 260 pixels) and should be at least 70 pixels tall (recommended: at least 260 pixels).

Certainly, you can go ahead and use any illustrator or image editor you have a command of. However, there are online services that enable you to generate and edit favicons:

It’s also worth mentioning that a favicon should somehow represent your brand image and align with the overall look of your application. If you want your favicon to be word-based, avoid long namings and use just the first letter (or 1 to 3 characters) instead, as due to its small size, more words will not be visible.

Install a favicon for your application through a simple configuration, calling it CUSTOM_FAVICON and attaching a favicon’s URL its a value. Just as shown in the example below:

Note: We only support PNG and ICO files for your favicon

You can copy your URL from elsewhere or use our public files to get one. Uploading your public files is explained in this article. In the meantime, we updated our favicon to a new one:

Why is using favicons important? There are a couple of reasons. A favicon reinforces your brand identity and makes your website more recognizable. It also can help users quickly locate your website among their open browser tabs or bookmarks. By providing a visual cue, users can more easily navigate to your website and differentiate it from other websites they may have opened.

In development environments, before being able to see your new favicon, you have to compile one of your pages to push the newly added favicon to your front end.

If you update your favicon configuration value in any other environment (test/acceptance/production) you will have to merge the environment to enable the new value of the favicon configuration.