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 vendors.style.dll.css
[root@test dlls]# pwd
/usr/share/kibana/built_assets/dlls
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.
https://base64.guru/converter/encode/image/svg
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.
