# Customize the default Kibana logo,header and title
**URL:** https://discuss.elastic.co/t/customize-the-default-kibana-logo-header-and-title/236845
**Category:** Kibana
**Created:** [June 12, 2020, 7:52am UTC](https://discuss.elastic.co/t/customize-the-default-kibana-logo-header-and-title/236845 "2020-06-12T07:52:27Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@Matish\_Bhuyan](https://discuss.elastic.co/u/Matish_Bhuyan)
#### Post date: [June 12, 2020, 7:52am UTC](https://discuss.elastic.co/t/customize-the-default-kibana-logo-header-and-title/236845/1 "2020-06-12T07:52:28Z")
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
```auto
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](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
> ```auto
> .kibanaWelcomeLogo {
>
> ```
```
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: contain;
background-image: url("base64 information in SVG file");
}
```
> ```auto
>
> ```
**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.
> ```auto
> .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;
}
```
> ```auto
>
> ```
The text that appears at the bottom of the loading logo can be changed by modifying the code below.
```auto
.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.
---
### Author:  [@chbas](https://discuss.elastic.co/u/chbas)
#### Post date: [June 12, 2020, 8:44am UTC](https://discuss.elastic.co/t/customize-the-default-kibana-logo-header-and-title/236845/2 "2020-06-12T08:44:53Z")
Hi @Matish_Bhuyan,
I think your topic is a duplicate of [this](https://discuss.elastic.co/t/how-to-customize-kibana-7-6-0-login-page/232769).
---
### Author:  [@Matish\_Bhuyan](https://discuss.elastic.co/u/Matish_Bhuyan)
#### Post date: [June 12, 2020, 9:00am UTC](https://discuss.elastic.co/t/customize-the-default-kibana-logo-header-and-title/236845/3 "2020-06-12T09:00:31Z")
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
**/usr/share/kibana/src/core/server**
[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 server.api.md
-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
---
### Author:  [@chbas](https://discuss.elastic.co/u/chbas)
#### Post date: [June 12, 2020, 9:11am UTC](https://discuss.elastic.co/t/customize-the-default-kibana-logo-header-and-title/236845/4 "2020-06-12T09:11:02Z")
As most of the changes are related to css, maybe you can use this [plugin](https://github.com/ch-bas/changeKibanaLogo7.6/) and change the version in the package.json file to 7.2 . I hope this will be helpful 🙂
---
### Author:  [@Matish\_Bhuyan](https://discuss.elastic.co/u/Matish_Bhuyan)
#### Post date: [June 12, 2020, 9:11am UTC](https://discuss.elastic.co/t/customize-the-default-kibana-logo-header-and-title/236845/5 "2020-06-12T09:11:26Z")
let me try that way then
---
### Author:  [@system](https://discuss.elastic.co/u/system)
#### Post date: [July 10, 2020, 9:11am UTC](https://discuss.elastic.co/t/customize-the-default-kibana-logo-header-and-title/236845/6 "2020-07-10T09:11:28Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.