# \[Guide\] Customize logo, text screen and loading in Kibana 7.x
**URL:** https://discuss.elastic.co/t/guide-customize-logo-text-screen-and-loading-in-kibana-7-x/194210
**Category:** Kibana
**Created:** [August 7, 2019, 10:26am UTC](https://discuss.elastic.co/t/guide-customize-logo-text-screen-and-loading-in-kibana-7-x/194210 "2019-08-07T10:26:11Z")
**Posts on this page:** 17
**Page:** 1
### Author:  [@tatdat](https://discuss.elastic.co/u/tatdat)
#### Post date: [August 7, 2019, 10:26am UTC](https://discuss.elastic.co/t/guide-customize-logo-text-screen-and-loading-in-kibana-7-x/194210/1 "2019-08-07T10:26:11Z")
**STATUS** : Updating ...
Hi everyone, i believe that have many people want to change logo kibana to owner company logo, like with me. After time for searching and reading source code i found solution to change Logo, Favicon, Welcome logo login, Header logo, SelectSpace logo and Loading image
1. Login logo (welcome screen)
2. Change login in Select Space
3. Change login in Header
4. Change loading screen
5. Change favicon
**1. Login logo (welcome screen)**
**Require** : Logo must have size 80\*80 pixel
Open file login\_page.js and remove original svg logo
> /usr/share/kibana/node\_modules/x-pack/plugins/security/public/views/login/components/login\_page/login\_page.js
Inline remove line 54 change line 53 to
```
react_1.default.createElement("span", { className: "loginWelcome__logo" }),
```
It look like
```
react_1.default.createElement("span", { className: "loginWelcome__logo" }),
react_1.default.createElement(eui_1.EuiTitle, { size: "l", className: "loginWelcome__title" },
```
Next, we need edit css. Open file **index.dark.css** and **index.light.css**. Find class **.loginWelcome\_\_logo {}**
Remove background and add background-image
```
background-image: url(url_your_logo_company);
```
It look like
```
.loginWelcome__logo {
display: inline-block;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
background-image: url(https://i.imgur.com/OJVk1hn.png);
border-radius: 100%;
padding: 16px;
-webkit-box-shadow: 0 6px 12px -1px rgba(0, 0, 0, 0.2), 0 4px 4px -1px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 6px 12px -1px rgba(0, 0, 0, 0.2), 0 4px 4px -1px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
margin-bottom: 32px; }
.loginWelcome__logo .euiIcon {
vertical-align: baseline; }
```
**Note** : Resize your logo to size 80\*80 pixel.
**Make change**
To make change, i need install or remove 1 plugin, to get kibana rebuild.
You can try with :
Install any plugin :
```
/usr/share/kibana/bin/kibana-plugin install https://github.com/wtakase/kibana-own-home/releases/download/v7.1.0/own_home-7.1.0.zip
systemctl restart kibana
```
Wait in 10s, and type :
```
/usr/share/kibana/bin/kibana-plugin remove own_home
systemctl restart kibana
```
**2. Change login in Select Space**
**Require** : Logo must have size 80\*80 pixel
Open file space\_selector.js and remove original svg logo
```
vim /usr/share/kibana/node_modules/x-pack/plugins/spaces/public/views/space_selector/space_selector.js
```
Remove line 82 and add ")" to end of line 81, before comma. It look like
```
react_2.default.createElement("span", { className: "spcSpaceSelector__logo" }),
react_2.default.createElement(eui_1.EuiTitle, { size: "l" },
react_2.default.createElement("h1", { tabIndex: 0, ref: this.setHeaderRef },
```
Next, we need edit css. Open file **index.dark.css** and **index.light.css**. Find class **.spcSpaceSelector\_\_logo {}** (line 127)
```
vim /usr/share/kibana/built_assets/css/plugins/spaces/index.dark.css
vim /usr/share/kibana/built_assets/css/plugins/spaces/index.dark.css
```
Remove background-color and add background-image
```
.spcSpaceSelector__logo {
margin-bottom: 32px;
display: inline-block;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
background-image: url("https://i.imgur.com/OJVk1hn.png");
border-radius: 100%;
padding: 16px;
-webkit-box-shadow: 0 6px 12px -1px rgba(0, 0, 0, 0.2), 0 4px 4px -1px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 6px 12px -1px rgba(0, 0, 0, 0.2), 0 4px 4px -1px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2); }
.spcSpaceSelector__logo .euiIcon {
vertical-align: baseline; }
```
**Note** : Resize your logo to size 80\*80 pixel.
After that, you can make change (look in **#1** )
**3. Change login in Header**
**Require** : Logo must have size 48\*48 pixel
Open file eui\_theme\_light.css and eui\_theme\_dark.css
```
vim /usr/share/kibana/node_modules/@elastic/eui/dist/eui_theme_light.css
```
And
```
vim /usr/share/kibana/node_modules/@elastic/eui/dist/eui_theme_darkcss
```
In class **.euiHeaderLogo\_\_icon** , change opacity to 0 (line 6248)
```
.euiHeaderLogo__icon {
opacity: 0;
position: relative;
top: -2px; }
```
In class **.euiHeaderLogo** , add background-image. (change url\_your\_logo to your url)
```
.euiHeaderLogo {
text-align: left;
position: relative;
height: 48px;
line-height: 48px;
min-width: 49px;
padding: 0 13px 0 12px;
display: inline-block;
vertical-align: middle;
background-image: url("url_your_logo");
white-space: nowrap; }
```
In class **.euiHeaderLogo:focus** , remove background
```
.euiHeaderLogo:focus {
text-decoration: underline; }
```
**4. Change loading screen**
writing ......
**5. Change favicon**
writing ......
---
### Author:  [@flash1293](https://discuss.elastic.co/u/flash1293)
#### Post date: [August 8, 2019, 8:36am UTC](https://discuss.elastic.co/t/guide-customize-logo-text-screen-and-loading-in-kibana-7-x/194210/2 "2019-08-08T08:36:58Z")
Thanks for this guide, @tatdat !
However, when using this be aware that the way of changing this might break with every release of Kibana. Official support for this is tracked here: [https://github.com/elastic/kibana/issues/17879](https://github.com/elastic/kibana/issues/17879)
---
### Author:  [@rcol](https://discuss.elastic.co/u/rcol)
#### Post date: [August 21, 2019, 12:37pm UTC](https://discuss.elastic.co/t/guide-customize-logo-text-screen-and-loading-in-kibana-7-x/194210/3 "2019-08-21T12:37:38Z")
Thanks for the tutorial.
Are you planning to finish the article?
---
### Author:  [@iukea](https://discuss.elastic.co/u/iukea)
#### Post date: [August 24, 2019, 7:59pm UTC](https://discuss.elastic.co/t/guide-customize-logo-text-screen-and-loading-in-kibana-7-x/194210/4 "2019-08-24T19:59:27Z")
would you recommend PNG files or SVG files for replacing the logo?
---
### Author:  [@elasticforme](https://discuss.elastic.co/u/elasticforme)
#### Post date: [August 24, 2019, 11:51pm UTC](https://discuss.elastic.co/t/guide-customize-logo-text-screen-and-loading-in-kibana-7-x/194210/5 "2019-08-24T23:51:50Z")
First I thought about changing Logo. But I don't see a use case here. rather I just put markdown and add logo there as link.
Why change logo. all my user knows they are on kibana dashboard. Plus next release will overwrite all of that and I have to redo this.
But @tatdat it is very good artical. it must be hard to test this out. Good job
---
### Author:  [@tatdat](https://discuss.elastic.co/u/tatdat)
#### Post date: [August 28, 2019, 2:54am UTC](https://discuss.elastic.co/t/guide-customize-logo-text-screen-and-loading-in-kibana-7-x/194210/6 "2019-08-28T02:54:31Z")
> [@rcol](#):
>
> Thanks for the tutorial.
> Are you planning to finish the article?
I will finish in this week. 🤩
> [@iukea](#):
>
> would you recommend PNG files or SVG files for replacing the logo?
You can use both of them.
---
### Author:  [@tatdat](https://discuss.elastic.co/u/tatdat)
#### Post date: [August 28, 2019, 3:00am UTC](https://discuss.elastic.co/t/guide-customize-logo-text-screen-and-loading-in-kibana-7-x/194210/7 "2019-08-28T03:00:47Z")
> [@elasticforme](#):
>
> Why change logo. all my user knows they are on kibana dashboard. Plus next release will overwrite all of that and I have to redo this.
We are agree about that. Before i have plan write plugin to do this but Elastic team is preparing to support change logo. You can track in here [https://github.com/elastic/kibana/issues/17879](https://github.com/elastic/kibana/issues/17879)
---
### Author:  [@Dania\_Ayu](https://discuss.elastic.co/u/Dania_Ayu)
#### Post date: [August 29, 2019, 6:49am UTC](https://discuss.elastic.co/t/guide-customize-logo-text-screen-and-loading-in-kibana-7-x/194210/8 "2019-08-29T06:49:32Z")
you use kibana development mode or kibana production mode?
---
### Author:  [@Almendro](https://discuss.elastic.co/u/Almendro)
#### Post date: [September 2, 2019, 5:46pm UTC](https://discuss.elastic.co/t/guide-customize-logo-text-screen-and-loading-in-kibana-7-x/194210/9 "2019-09-02T17:46:25Z")
Somebody know how to customize different logos according to the space?
---
### Author:  [@tatdat](https://discuss.elastic.co/u/tatdat)
#### Post date: [September 6, 2019, 2:33am UTC](https://discuss.elastic.co/t/guide-customize-logo-text-screen-and-loading-in-kibana-7-x/194210/11 "2019-09-06T02:33:55Z")
I think that is impossible, because space is dynamic. Maybe we need to wait support from Elastic team for this feature.
> [@Dania\_Ayu](#):
>
> you use kibana development mode or kibana production mode?
Im using Kibana in Prouction, bro
---
### Author:  [@yhy900211](https://discuss.elastic.co/u/yhy900211)
#### Post date: [September 18, 2019, 1:50pm UTC](https://discuss.elastic.co/t/guide-customize-logo-text-screen-and-loading-in-kibana-7-x/194210/12 "2019-09-18T13:50:53Z")
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.
> **[SVG to Base64 | Image | Base64 Encode | Base64 Converter | Base64](https://base64.guru/converter/encode/image/svg)**
>
> Convert SVG to Base64 online and use it as a generator, which provides ready-made examples for data URI, img src, CSS background-url, and others
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.
---
### Author:  [@tatdat](https://discuss.elastic.co/u/tatdat)
#### Post date: [October 16, 2019, 2:45am UTC](https://discuss.elastic.co/t/guide-customize-logo-text-screen-and-loading-in-kibana-7-x/194210/13 "2019-10-16T02:45:22Z")
Thank for your help @yhy900211, i merged your content to my post.
Thank you again!
---
### Author:  [@Amphagory](https://discuss.elastic.co/u/Amphagory)
#### Post date: [October 21, 2019, 9:13pm UTC](https://discuss.elastic.co/t/guide-customize-logo-text-screen-and-loading-in-kibana-7-x/194210/14 "2019-10-21T21:13:15Z")
It seems in version 7.3.2 and 7.4.0, the files has been moved around and content of the files has changed. I was wondering if anyone played around with these version to correctly customized Kibana with their logos?
---
### Author:  [@haythem](https://discuss.elastic.co/u/haythem)
#### Post date: [November 15, 2019, 10:30am UTC](https://discuss.elastic.co/t/guide-customize-logo-text-screen-and-loading-in-kibana-7-x/194210/15 "2019-11-15T10:30:27Z")
Hello , i tried your way but i'm facing a problem with the left menu Header logo , can you explain it a little bit more .
thank you in advance
Kibana version 7.4.0
---
### Author:  [@yhy900211](https://discuss.elastic.co/u/yhy900211)
#### Post date: [November 16, 2019, 3:49pm UTC](https://discuss.elastic.co/t/guide-customize-logo-text-screen-and-loading-in-kibana-7-x/194210/17 "2019-11-16T15:49:05Z")
I installed and tested kibana version 7.4.2. The left menu header logo is still available in version 7.4.2 by modifying the source code of
`kibana \ built_assets \ dlls \ icon.logo_kibana-js.bundle.dll.js.`
Modify the svg file format to base64 format and insert it into your source code. For a site that converts SVG format to base64, see below.
https://base64.guru/converter/encode/image/svg
Give it a try and send me an email if you can't find a way.
---
### Author:  [@j\_a\_griffiths](https://discuss.elastic.co/u/j_a_griffiths)
#### Post date: [December 3, 2019, 9:14am UTC](https://discuss.elastic.co/t/guide-customize-logo-text-screen-and-loading-in-kibana-7-x/194210/18 "2019-12-03T09:14:24Z")
> [@yhy900211](#):
>
> e format to base64 format and insert it into your source code. For a site that converts SVG format to base64, see below.
> [SVG to Base64 | Image | Base64 Encode | Base64 Converter | Base64](https://base64.guru/converter/encode/image/svg)
>
> Give it a try and send me an email if you can't find a way.
Thanks that worked
---
### Author:  [@system](https://discuss.elastic.co/u/system)
#### Post date: [December 31, 2019, 9:14am UTC](https://discuss.elastic.co/t/guide-customize-logo-text-screen-and-loading-in-kibana-7-x/194210/19 "2019-12-31T09:14:33Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.