Custom Logo Kibana 7.10.0 (guide)

Elastic Stack Kibana
1

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 :wink:.

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 or SVG version of your custom logo. (I used a base64 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 or SVG 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/before xpack.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/after kibana-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

12 Likes
2

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.