[Guide] Customize logo, text screen and loading in Kibana 7.x

Elastic Stack Kibana
12

I updated the tatdat's post. This is the method for 3, 4 and 5.

I'm based on a Kivana 7.x environment. The logo to be applied needs to be prepared in SVG format. There are many websites where Google converts image files to SVG format.

4. Change loading screen
The loading screen has a base64 image path. Just convert the svg format to base64 and modify the code. For a site that converts SVG format to base64, see below.

You need to modify both files in the path below.

Logo image:

kibana \ src \ legacy \ ui \ ui_render \ views \ chrome.pug

Logo image and content at the bottom of the logo:

kibana \ src \ legacy \ ui \ ui_render \ views \ ui.app.pug

chrome.pug
By modifying line 9 in the chrome.pug file, you can modify the title of the kibana web page.

title Kibana

To change the loading logo, modify the

.kibanaWelcomeLogo {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url("base64 information in SVG file");
      }

ui_app.pug
The background-image: url of kibanaWelcomeLogo in the ui_app.pug file should also be changed to the base64 information of the SVG file above.

.kibanaWelcomeLogo {
       background-image: url("base64 information in SVG file");
       background-repeat: no-repeat;
       background-size: contain;
       width: 60px;
       height: 60px;
       margin: 10px 0px 10px 20px;
     }

The text that appears at the bottom of the loading logo can be changed by modifying the code below.

.kibanaWelcomeView(id="kbn_loading_message", style="display: none;")
    .kibanaLoaderWrap
      .kibanaLoader
      .kibanaWelcomeLogoCircle
        .kibanaWelcomeLogo
    .kibanaWelcomeText(data-error-message=i18n('common.ui.welcomeErrorMessage', { defaultMessage: 'Kibana did not load properly. Check the server output for more information.' }))
      | #{i18n('common.ui.welcomeMessage', { defaultMessage: 'Your Message' })}

5.Change favicon
The favicon.ico file is in the following path:
Overwrite the favicon.ico you want to change.

kibana \ src \ legacy \ ui \ public \ assets \ favicons

The image files in the folder are also created according to the size, and overwriting seems to be no problem. Clear your browser's cache and run it to reflect the favicon.

3. Left Menu Header Logo
For me, modifying the home button logo on the left menu did not work with tatdat's suggested method.

Finally, we found the js path where the kibana logo was defined and solved it by modifying it. The kibana logo is defined in a file at the following path: It was very hard to find.

kibana\built_assets\dlls\icon.logo_kibana-js.bundle.dll.js

Just insert the code from the SVG file into the js code, but it's a little bit easier to apply.

2 Likes