Verified on Kibana 7.10.0, running on Debian 10 (Buster). Applies for the same version in Windows.
Hello,
For all users like me, that need to customize the logos in Kibana, I share this guide that I have been creating myself as I have been able to solve each problem.
This is only a hacky workaround. I hope that one day it would be available and be able to use the official solution in which the Kibana development team is working.
Thanks to all the Elastic Team Members and other users who supported and helped me on this project.
This is an update of my previous post as some files were moved or renamed in Kibana.
What is included:
- Favicon and text
- Loading logo and text
- Login Logo and text
- Navbar logo (sidebar top left logo)
- Space Selector logo
- Exit Full Screen logo
Note 1: After fully complete every step, I recommend:
- Restart Kibana
- Clean browser cache and local data (at least for your Kibana site)
- Reload the page
Note 2: You will need to install package npm
, so you can use later the command npx
.
$ sudo apt-get install npm
Note 3: This is a recommendation for the custom image that you will use to replace the logos. The smaller the base64
or SVG
image file, the easier it will be for Kibana to process the file you are modifying. I recommend a size no larger than 100px
. So first, reduce the original image file to 100px
, then convert it to base64
(or SVG
) and you will see that the generated code is much smaller.
Pay special attention to the portion of code you need to remove/edit on all files, as if is not done right, it might cause to load a blank page. You can backup each file before editing, so you can replace the bad file and start over, if something goes wrong .
Favicons
-
Go to the folder where the favicons are to see the sizes of each favicon that Kibana serves.
/usr/share/kibana/src/core/server/core_app/assets/favicons/
-
Take your personal logo and create a version that matches the size of each of the files within the Kibana favicons folder.
-
Replace each file with the custom logo. Keep the original names of the files to be replaced.
Browser tab title
-
Open file
$ sudo nano /usr/share/kibana/src/core/server/rendering/views/template.js
-
Look for the code line that generates the title "
Elastic
" and change that to your custom text
/*#__PURE__*/_react.default.createElement("title", null, "Elastic"),
-
Result:
/*#__PURE__*/_react.default.createElement("title", null, "Custom_Text"),
Loading logo and text
-
Open file
$ sudo nano /usr/share/kibana/src/core/server/rendering/views/template.js
-
Look for code string:
const logo = _react.default.createElement("svg", {…
-
Replace this with a
base64
orSVG
version of your custom logo. (I used abase64
image) -
Result:
const logo = _react.default.createElement("img", {src:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAqkAAAK … 5CYII=',width:'100px'});
-
Locate code block and replace message
}, i18n('core.ui.welcomeMessage', {
defaultMessage: 'Loading Elastic' -
Result:
}, i18n('core.ui.welcomeMessage', {
defaultMessage: 'Loading custom_text'
Login logo and text
-
Open file
$ sudo nano /usr/share/kibana/x-pack/plugins/security/target/public/security.chunk.4.js
-
Search for the welcome text and replace it with your own
{id:"xpack.security.loginPage.welcomeTitle",defaultMessage:"Welcome to Elastic"}
-
Result:
{id:"xpack.security.loginPage.welcomeTitle",defaultMessage:"Welcome to custom_text"}
-
Search for the Login logo image and replace it with your own
className:"loginWelcome__logo"}, … {type:"logoElastic",size:"xxl"}
Optional: If you want to use a logo bigger than 40x40px, then remove the elastic-frame object that encloses the
logoElastic
object from the code, so you can use a custom logo and set a custom size.,external_kbnSharedDeps_React_default.a.createElement("span",{className:"loginWelcome__logo"},
And also remove the last parenthesis behind the
logoElastic
object (leave only one, instead of two)… {type:"logoElastic",size:"xxl"})),…
-
Result:
,external_kbnSharedDeps_React_default.a.createElement(external_kbnSharedDeps_ElasticEui_["EuiSpacer"],{size:"xxl"}),external_kbnSharedDeps_React_default.a.createElement(external_kbnSharedDeps_ElasticEui_["EuiIcon"],{type:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUg … JevgsIAAAAASUVORK5CYII=",size:"original”}),
-
Save changes to JavaScript file and generate the compressed files. Then restart Kibana
$ npx gzip-cli /usr/share/kibana/x-pack/plugins/security/target/public/security.chunk.4.js -e=gz -e=br
$ sudo systemctl restart kibana
Navbar logo (sidebar top left logo)
-
Open file
$ sudo nano /usr/share/kibana/src/core/target/public/core.entry.js
-
Locate string and replace with own
base64
orSVG
image
"EuiHeaderLogo"],{"data-test-subj":"logo”,iconType:"logoElastic"
-
Result:
EuiHeaderLogo"],{"data-test-subj":"logo”, iconType:"data:image/png;base64,iVBORw0
…SUVORK5CYII="
-
Save changes to JavaScript file and generate the compressed files. Then restart Kibana.
$ npx gzip-cli /usr/share/kibana/src/core/target/public/core.entry.js -e=gz -e=br
$ sudo systemctl restart kibana
Space Selector logo
-
Open file
$ sudo nano /usr/share/kibana/x-pack/plugins/spaces/target/public/spaces.chunk.1.js
-
Locate string and replace with own
base64
image
"logoElastic
" near/beforexpack.spaces.spaceSelector.selectSpacesTitle string
-
Remove frame object containing the EuiIcon
,external_kbnSharedDeps_React_default.a.createElement("span",{className:"spcSpaceSelector__logo"},
And the last parenthesis at the end of this string (leave only one, instead of two):
…
ps_ElasticEui_["EuiIcon"],{size:"xxl",type:"logoElastic"})) ,
-
Change
size
from “xxl
” to “original
” -
Result:
...a.createElement(external_kbnSharedDeps_ElasticEui_["EuiIcon"],{size:"original",type:"data:image/png;base64,iVBORw0KGgoAAAANS … m+JevgsIAAAAASUVORK5CYII="}),
-
Save changes to JavaScript file and generate the compressed files. Then restart Kibana.
$ npx gzip-cli /usr/share/kibana/x-pack/plugins/spaces/target/public/spaces.chunk.1.js -e=gz -e=br
$ sudo systemctl restart kibana
Exit Full Screen logo
-
Open file
$ sudo nano /usr/share/kibana/src/plugins/kibana_react/target/public/kibanaReact.plugin.js
-
Locate string and replace with own
base64
image
"logoElastic
" near/afterkibana-react.exitFullScreenButton string
-
Result:
external_kbnSharedDeps_React_default.a.createElement(external_kbnSharedDeps_ElasticEui_["EuiIcon"],{type:"data:image/png;base64,iVBORw0KGgoAAAAN … seB5vdIAAAAASUVORK5CYII=",size:"l"})),
-
Save changes to JavaScript file and generate the compressed files. Then restart Kibana
$ npx gzip-cli /usr/share/kibana/src/plugins/kibana_react/target/public/kibanaReact.plugin.js -e=gz -e=br
$ sudo systemctl restart kibana
Note for Windows users:
Basically the steps described in the tutorial should work for the same Windows version as well. At least the files to edit and the modifications are the same. The path will change a little bit, but just the root folder kibana-7.10.0-windows-x86_64\
.
Example:
Debian
/usr/share/kibana/src/core/server/core_app/assets/favicons/
Windows
kibana-7.10.0-windows-x86_64\src\core\server\core_app\assets\favicons\
Commands used in Debian has their counterpart in Windows
Example: The below command is just a text editor in Debian. You can use Notepad or Notepad++ in Windows to edit the .js
files.
$ sudo nano /usr/share/kibana/src/core/server/rendering/views/template.js
And the last piece you will need is the compressor app to generate the the compressed files. I am not sure about which app you can use in Windows, but try to find one that generates compressed files in formats .gz
(Gzip ) and .br
(Brotli)
That will be needed to replace this command, but the goal is the same: to generate the the compressed files in formats .gz
(Gzip) and .br
(Brotli).
$ npx gzip-cli /usr/share/kibana/x-pack/plugins/security/target/public/security.chunk.4.js -e=gz -e=br
After completed each modification, always restart Kibana process
Debian
sudo systemctl restart kibana
Windows
You can use PoweShell or CMD or just open Services app, locate Kibana service, right click, restart