# How to Customize Kibana 7.6.0 Login Page?
**URL:** https://discuss.elastic.co/t/how-to-customize-kibana-7-6-0-login-page/232769
**Category:** Kibana
**Created:** [May 15, 2020, 7:58am UTC](https://discuss.elastic.co/t/how-to-customize-kibana-7-6-0-login-page/232769 "2020-05-15T07:58:54Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Emna1](https://discuss.elastic.co/u/Emna1)
#### Post date: [May 15, 2020, 7:58am UTC](https://discuss.elastic.co/t/how-to-customize-kibana-7-6-0-login-page/232769/1 "2020-05-15T07:58:54Z")
Hi, I've read a few posts around how to customize the login page of Kibana but all seem obsolete since from version to version, the code gets changed and so do the mods.
so can i have a guide to :
1- Browser title and loading logo (1)
2- Loading logo (2)
3- Favicons
4- Remove Kibana background images on login page
5- Change side bar logo
i'm with version 7.6.0 , i will appreciate any help!!
---
### Author:  [@Mikhail\_Shustov](https://discuss.elastic.co/u/Mikhail_Shustov)
#### Post date: [May 15, 2020, 9:28am UTC](https://discuss.elastic.co/t/how-to-customize-kibana-7-6-0-login-page/232769/2 "2020-05-15T09:28:53Z")
We are going to add this functionality in an upcoming version. Stay tuned [https://github.com/elastic/kibana/issues/17879](https://github.com/elastic/kibana/issues/17879)
---
### Author:  [@Mikhail\_Shustov](https://discuss.elastic.co/u/Mikhail_Shustov)
#### Post date: [May 15, 2020, 2:29pm UTC](https://discuss.elastic.co/t/how-to-customize-kibana-7-6-0-login-page/232769/3 "2020-05-15T14:29:13Z")
There is a plugin that allows you to change Kibana logo [Logo change](https://discuss.elastic.co/t/logo-change/226370/4)
---
### Author:  [@Emna1](https://discuss.elastic.co/u/Emna1)
#### Post date: [May 27, 2020, 12:01am UTC](https://discuss.elastic.co/t/how-to-customize-kibana-7-6-0-login-page/232769/4 "2020-05-27T00:01:37Z")
hi, have you any idea how to change backgroud of login page et remove the imgs?
---
### Author:  [@marrel](https://discuss.elastic.co/u/marrel)
#### Post date: [June 5, 2020, 9:31am UTC](https://discuss.elastic.co/t/how-to-customize-kibana-7-6-0-login-page/232769/5 "2020-06-05T09:31:59Z")
> [@Emna1](#):
>
> Loading logo (2)
For changing the **loading logo and text** , try this:
**Logo:**
Go at `src/core/server/rendering/views/styles.js` and change the following: `mybase64image`. I also changed the field `margin` below in order my logo to center properly.
```auto
.kibanaWelcomeLogo {
width: 60px;
height: 60px;
margin: 10px 0 0px 10px;
background-repeat: no-repeat;
background-size: contain;
background-image: url('data:image/svg+xml;base64, mybase64image');
}
```
**Text:**
For the text "Loading Kibana", go at `src/core/server/rendering/views/template.js` and search for this specific text and change it with your own.
Wish this works also for you. 🙂
P.S.: for your logo, you should convert your logo from `png` to `svg` and then from `svg` to `base64`. (there are online photo editors for these conversions)
---
### Author:  [@marrel](https://discuss.elastic.co/u/marrel)
#### Post date: [June 5, 2020, 9:41am UTC](https://discuss.elastic.co/t/how-to-customize-kibana-7-6-0-login-page/232769/6 "2020-06-05T09:41:55Z")
> [@Emna1](#):
>
> 1- Browser title and loading logo (1)
For the **logo in the browser** , you should go in the favicons folder `kibana\src\legacy\ui\public\assets\favicons` and replace the images there with your owns.
For the **title in the browser** , go at the file `kibana\src\core\server\rendering\views\template.js` and change the word **kibana** below:
line 55
> }), \_react.default.createElement("title", null, " **kibana**"), \_react.default.createElement(\_fonts.Fonts, {
---
### Author:  [@marrel](https://discuss.elastic.co/u/marrel)
#### Post date: [June 5, 2020, 9:44am UTC](https://discuss.elastic.co/t/how-to-customize-kibana-7-6-0-login-page/232769/7 "2020-06-05T09:44:33Z")
> [@Emna1](#):
>
> 3- Favicons
Go at folder `kibana\src\legacy\ui\public\assets\favicons` and replace the images there with your owns. (take care the types/format (.png, .ico) of the images to be the same with the ones you overwrite)
---
### Author:  [@Emna1](https://discuss.elastic.co/u/Emna1)
#### Post date: [June 5, 2020, 2:56pm UTC](https://discuss.elastic.co/t/how-to-customize-kibana-7-6-0-login-page/232769/8 "2020-06-05T14:56:06Z")
Hi, @marrel thank you so much for help, i just have two questions have you any idea how to change logo in left( header sidebar of kibana ) and how remove imgs in page of login ??
i really appreciate your help.
---
### Author:  [@marrel](https://discuss.elastic.co/u/marrel)
#### Post date: [June 9, 2020, 7:36am UTC](https://discuss.elastic.co/t/how-to-customize-kibana-7-6-0-login-page/232769/9 "2020-06-09T07:36:43Z")
Hi @Emna1!
For **changing the logo** in 7.6 you can follow the below steps:
1. go at the file `kibana\src\core\server\rendering\views\styles.tsx` .
2. you will see the following code:
> .kibanaWelcomeLogo {
> width: 60px;
> height: 60px;
> margin: 10px 0 10px 10px;
> background-repeat: no-repeat;
> background-size: contain;
> /\* SVG optimized according to [http://codepen.io/tigt/post/optimizing-svgs-in-data-uris](http://codepen.io/tigt/post/optimizing-svgs-in-data-uris) \*/
> background-image: url('data:image/svg+xml;base64, base64image'); }
1. exactly after that code you should add:
> a[data-test-subj="logo"] \* {
> display: none;
> }
> a[data-test-subj="logo"] {
> background: url(url\_to\_my\_logo) no-repeat 0 0;
> background-size: auto 26px;
> border-bottom: none;
> background-position: 10px 10px;
> }
> a[data-test-subj="logo"]:focus {
> background: url(url\_to\_my\_logo) no-repeat 0 0;
> background-size: auto 26px;
> border-bottom: none;
> background-position: 10px 10px;
> }
change the above two fields `url_to_my_logo` with your own logo, and the logo will be changed! Regarding this change, one person from the community helped me when I had the [same problem](https://discuss.elastic.co/t/customize-logo-in-kibana-7-6/234771).
Regarding `removing imgs in page of login`, I am also working on it now. If I had something successful I will definitely share with you. If it is possible pls share also your comments if you have something from your side.
---
### Author:  [@Emna1](https://discuss.elastic.co/u/Emna1)
#### Post date: [June 9, 2020, 8:26am UTC](https://discuss.elastic.co/t/how-to-customize-kibana-7-6-0-login-page/232769/10 "2020-06-09T08:26:45Z")
Hi, @marrel
Thank you so much you are so helpful, please i have a question when i add the url of my own logo and i run kibana, the logo is gone but it doesn't change.Is there a mistake i made here? my logo (60\*60 pixel)
> Blockquote
> a[data-test-subj="logo"] \* {
> display: none;
> }
> a[data-test-subj="logo"] {
> background: url('C:/Users/capt.png') no-repeat 0 0;
> background-size: auto 26px;
> border-bottom: none;
> background-position: 10px 10px;
> }
> a[data-test-subj="logo"]:focus {
> background: url('C:/Users/capt.png') no-repeat 0 0;
> background-size: auto 26px;
> border-bottom: none;
> background-position: 10px 10px;
> }
> Blockquote
---
### Author:  [@marrel](https://discuss.elastic.co/u/marrel)
#### Post date: [June 9, 2020, 8:49am UTC](https://discuss.elastic.co/t/how-to-customize-kibana-7-6-0-login-page/232769/11 "2020-06-09T08:49:44Z")
Your logo should be either from the internet or from favicons file (for a local image).
If you have your logo somewhere on the internet (eg. your website), use the url/link of that logo.
However, I prefer to use my local image. So in order to load your local image, add your logo in the favicons file and use img 's url when you run Kibana.
Your url would have the following path:
> url([http://xxxxxxxx:5601/ui/favicons/yourlogo.png](http://xxxxxxxx:5601/ui/favicons/yourlogo.png))
Use the path as above, without this `''` symbol.
I think your logo should be 80x80.
---
### Author:  [@Emna1](https://discuss.elastic.co/u/Emna1)
#### Post date: [June 9, 2020, 10:13am UTC](https://discuss.elastic.co/t/how-to-customize-kibana-7-6-0-login-page/232769/12 "2020-06-09T10:13:17Z")
Thank you so much, really i appreciate your help, it works fine now 😀
---
### Author:  [@Emna1](https://discuss.elastic.co/u/Emna1)
#### Post date: [June 10, 2020, 4:54pm UTC](https://discuss.elastic.co/t/how-to-customize-kibana-7-6-0-login-page/232769/13 "2020-06-10T16:54:06Z")
Hi, @marrel, have you found a way to delete the images in the login page, I'm looking for, but no news yet 🙄
---
### Author:  [@chbas](https://discuss.elastic.co/u/chbas)
#### Post date: [June 11, 2020, 9:59am UTC](https://discuss.elastic.co/t/how-to-customize-kibana-7-6-0-login-page/232769/14 "2020-06-11T09:59:32Z")
Hi @Emna1,
what images are you referring to exactly ?
PS: This may [help](https://github.com/ch-bas/changeKibanaLogo7.6).
---
### Author:  [@Emna1](https://discuss.elastic.co/u/Emna1)
#### Post date: [June 11, 2020, 2:08pm UTC](https://discuss.elastic.co/t/how-to-customize-kibana-7-6-0-login-page/232769/15 "2020-06-11T14:08:05Z")
I'm talking about these imgs
---
### Author:  [@marrel](https://discuss.elastic.co/u/marrel)
#### Post date: [June 12, 2020, 7:15am UTC](https://discuss.elastic.co/t/how-to-customize-kibana-7-6-0-login-page/232769/16 "2020-06-12T07:15:50Z")
I am working on this @Emna1, but not good news. The only difference is that I tried to change the logo from the `Select Space` page but kibana logo is still loaded on top of mine and now I have two logos together..
Probably kibana logo is produced from a different file. 😕
---
### Author:  [@chbas](https://discuss.elastic.co/u/chbas)
#### Post date: [June 12, 2020, 7:41am UTC](https://discuss.elastic.co/t/how-to-customize-kibana-7-6-0-login-page/232769/17 "2020-06-12T07:41:14Z")
I already provided [that](https://github.com/ch-bas/changeKibanaLogo7.6/blob/a0376fce33a40ffdd2683921bb3cf5ea90c957bc/custom_css/public/main.less#L28).
Don't forget to delete the optimize folder in order to force Kibana to rebundle. 🙂
---
### Author:  [@Akhil\_Kaithoju](https://discuss.elastic.co/u/Akhil_Kaithoju)
#### Post date: [June 12, 2020, 10:27am UTC](https://discuss.elastic.co/t/how-to-customize-kibana-7-6-0-login-page/232769/18 "2020-06-12T10:27:56Z")
Hi marrel,
You have to change two files for changing the background image :
i) **/kibana/src/legacy/ui/public/styles/\_mixins.scss**
@mixin kibanaFullScreenGraphics($euiZLevel: $euiZLevel9) {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: $euiZLevel + 1000;
**background: url(' your image') no-repeat center center fixed;**
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0;
overflow: auto;
animation: kibanaFullScreenGraphics\_FadeIn $euiAnimSpeedExtraSlow $euiAnimSlightResistance 0s forwards;
@keyframes kibanaFullScreenGraphics\_FadeIn {
from {
opacity: 0;
transform: translateY(200px), scale(.75);
}
```
to {
opacity: 1;
transform: translateY(0), scale(1);
}
```
}
}
ii) x-pack/legacy/plugins/security/public/views/login/\_login.scss :
.loginWelcome\_\_content {
position: relative;
margin: auto;
max-width: 460px;
padding-left: $euiSizeXL;
padding-right: $euiSizeXL;
z-index: 10;
**background: url('your image');**
&.loginWelcome\_\_contentDisabledForm {
max-width: 700px;
}
}
Thanks
Akhil
---
### Author:  [@Emna1](https://discuss.elastic.co/u/Emna1)
#### Post date: [June 12, 2020, 2:06pm UTC](https://discuss.elastic.co/t/how-to-customize-kibana-7-6-0-login-page/232769/19 "2020-06-12T14:06:08Z")
Hi, @Akhil_Kaithoju, i try to change the background in login page and i change this two files, but there is no changes; in file \_mixins.scss after this
> Blockquote
> animation: kibanaFullScreenGraphics\_FadeIn $euiAnimSpeedExtraSlow $euiAnimSlightResistance 0s forwards;
> Blockquote.
i delete this code.
> Blockquote
> &::before {
> position: absolute;
> top: 0;
> right: 0;
> z-index: 1;
> width: 400px;
> height: 370px;
> content: url(lightOrDarkTheme('ui/assets/images/bg\_top\_branded.svg', 'ui/assets/images/bg\_top\_branded\_dark.svg'));
> }
> &::after {
> position: fixed;
> bottom: 0;
> left: 0;
> z-index: 1;
> width: 1170px;
> height: 880px;
> content: url(lightOrDarkTheme('ui/assets/images/bg\_bottom\_branded.svg', 'ui/assets/images/bg\_bottom\_branded\_dark.svg'));
> }
> Blockquote
and my image, i put it like this
background: url(https://........................1495.jpg) no-repeat center center fixed;
is there any mistakes here??
---
### Author:  [@Akhil\_Kaithoju](https://discuss.elastic.co/u/Akhil_Kaithoju)
#### Post date: [June 12, 2020, 2:19pm UTC](https://discuss.elastic.co/t/how-to-customize-kibana-7-6-0-login-page/232769/20 "2020-06-12T14:19:34Z")
Are you using kibana build folder or gihub source code ??
If you use Kibana build you need to remove the bundles.
[Next page](https://discuss.elastic.co/t/how-to-customize-kibana-7-6-0-login-page/232769.md?page=2)