Customize the default Kibana logo,header and title

Hi @yhy900211

I have tried your above steps to customize the logo .welcome title and the favicon value but it doesn't seem to work in my case

I am using kibana version 7.2.

and also to change the kibana logo on left side i ain't found any js file named as icon.logo_kibana-js.bundle.dll.js in your suggested path.

Well these are the files present in your suggested path in my system

root@test dlls]# ls -l

total 12412

-rw-rw-r-- 1 root root     1807 Jun 20  2019 69d89e51f62b6a582c311c35c0f778aa.svg
-rw-rw-r-- 1 root root 12271297 Jun 20  2019 vendors.bundle.dll.js
-rw-rw-r-- 1 root root    15620 Jun 20  2019 vendors.entry.dll.js
-rw-rw-r-- 1 root root   381057 Jun 20  2019 vendors.manifest.dll.json
-rw-rw-r-- 1 root root    31298 Jun 20  2019

[root@test dlls]# pwd

can you please help me out to customize my logo title and loading screen

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 \

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");

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;")
    .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.


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

Hi @Matish_Bhuyan,
I think your topic is a duplicate of this.

Hi @chbas the issue seems working for kibana version 7.6

I am using version 7.2 and for changing the logo as suggested in the forum i went to this path

[root@test server]# pwd

[root@test server]# ll
total 68
-rw-r--r-- 1 root root  3231 Jun 20  2019 bootstrap.js
drwxr-xr-x 4 root root  4096 May 14 13:37 config
-rw-r--r-- 1 root root    13 Jun 20  2019 core_context.js
drwxr-xr-x 2 root root  4096 May 14 13:37 dev
drwxr-xr-x 2 root root  4096 May 14 13:37 elasticsearch
drwxr-xr-x 4 root root  4096 May 14 13:37 http
-rw-r--r-- 1 root root  4560 Jun 20  2019 index.js
drwxr-xr-x 4 root root  4096 May 14 13:37 legacy
drwxr-xr-x 4 root root  4096 May 14 13:37 logging
drwxr-xr-x 3 root root  4096 May 14 13:37 plugins
drwxr-xr-x 2 root root  4096 May 14 13:37 root
-rw-r--r-- 1 root root 13019 Jun 20  2019
-rw-r--r-- 1 root root  3088 Jun 20  2019 server.js

Here as per the requirement the rendering folder isn't present to proceed further

As most of the changes are related to css, maybe you can use this plugin and change the version in the package.json file to 7.2 . I hope this will be helpful :slight_smile:

let me try that way then

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.