Custom Logo Kibana 7.9.2 (guide)

Elastic Stack Kibana
1

Only verified on Kibana 7.9.2 running in Debian 10

Hello,

For all users who, like me, 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 hack workaround. I hope that one day it will 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.

If I find the way to do more custom changes to the UI, I will update the post.

So far:

  • Favicon and text
  • Loading logo and text
  • Login Logo and text
  • Navbar logo (top left logo)

*Note: After apply any of the following changes, always do:

  1. Restart Kibana
  2. Clean browser cache and local data (at least for your Kibana site)
  3. Reload the page

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/4.plugin.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 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
    … {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/4.plugin.js -e=gz -e=br

    $ sudo systemctl restart kibana

Navbar logo (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

10 Likes
2

Adding:

  • Space Selector logo
  • Exit Full Screen logo

Space Selector logo

  • Open file

    $ sudo nano /usr/share/kibana/x-pack/plugins/spaces/target/public/1.plugin.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:

    … 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/1.plugin.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

6 Likes
4

When I run this I just get

(node:20485) UnhandledPromiseRejectionWarning: TypeError: compressionMethod is not a function
at resolve (/home/lmqadmin/.npm/_npx/20485/lib/node_modules/gzip-cli/dist/index.js:195:19)
at new Promise ()
at gzipFile (/home/lmqadmin/.npm/_npx/20485/lib/node_modules/gzip-cli/dist/index.js:193:12)
at Promise.all.outputExtension.map.extension (/home/lmqadmin/.npm/_npx/20485/lib/node_modules/gzip-cli/dist/index.js:189:61)
at Array.map ()
at gzipFile (/home/lmqadmin/.npm/_npx/20485/lib/node_modules/gzip-cli/dist/index.js:189:44)
at gzipPattern (/home/lmqadmin/.npm/_npx/20485/lib/node_modules/gzip-cli/dist/index.js:211:15)
at gzipPattern.next ()
at handlePatterns (/home/lmqadmin/.npm/_npx/20485/lib/node_modules/gzip-cli/dist/index.js:202:16)
at handlePatterns.next ()
(node:20485) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:20485) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

5

Hi,

This is the first time I use that command. I just found this solution in a forum, but you can check the following and see if that helps:

Install npm package, so you can use npx
sudo apt-get install npm

Then try to run your command again:
npx gzip-cli /usr/share/kibana/x-pack/plugins/security/target/public/4.plugin.js -e=gz -e=br

Good luck!

6

Thank you for your reply but I have already installed npm. the subsequent command appears to run but then provides the error I provided

7

Honestly I would have to research deeper about this error. I'm just guessing, but maybe it could be related to the version of Node running in your machine. I am using Node v10.21.0.

8

Note for Windows users:

Basically the steps described in the tutorial should work for 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.9.2-windows-x86_64\ .

Example:
Debian
/usr/share/kibana/src/core/server/core_app/assets/favicons/

Windows
kibana-7.9.2-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 would need is the compressor app to generate the the compressed files. I am not sure about wish app you can use in Windows, but try to find one that generates compressed files in formats .gz (Gzip ) and .br (Brotli)

That would 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/4.plugin.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

1 Like
9

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