# Custom Logo Kibana 7.9.2 (guide) **URL:** \ **Category:** Kibana\ **Created:** [October 2, 2020, 3:35pm UTC](https://discuss.elastic.co/t/custom-logo-kibana-7-9-2-guide/250814 "2020-10-02T15:35:51Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![ManuelF](https://avatars.discourse-cdn.com/v4/letter/m/e99b99/32.png) [@ManuelF](https://discuss.elastic.co/u/ManuelF)\ **Post date:** [October 2, 2020, 3:35pm UTC](https://discuss.elastic.co/t/custom-logo-kibana-7-9-2-guide/250814/1 "2020-10-02T15:35:51Z")
**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](https://github.com/elastic/kibana/issues/75377) 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"),` **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. - Locate code block and replace message **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"}` - Search for the Login logo image and replace it with your own `className:"loginWelcome__logo"},` … `{type:"logoElastic",size:"xxl"}` - 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` **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"` - 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` ---
**Author:** ![ManuelF](https://avatars.discourse-cdn.com/v4/letter/m/e99b99/32.png) [@ManuelF](https://discuss.elastic.co/u/ManuelF)\ **Post date:** [October 6, 2020, 3:25pm UTC](https://discuss.elastic.co/t/custom-logo-kibana-7-9-2-guide/250814/2 "2020-10-06T15:25:56Z")
Adding: - Space Selector logo - Exit Full Screen logo **Space Selector logo** - Open file - Locate string and replace with own `base64` image - Remove frame object containing the EuiIcon - Save changes to JavaScript file and generate the compressed files. Then 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 - 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` ---
**Author:** ![lquin1978](https://avatars.discourse-cdn.com/v4/letter/l/5daacb/32.png) [@lquin1978](https://discuss.elastic.co/u/lquin1978)\ **Post date:** [October 9, 2020, 2:20pm UTC](https://discuss.elastic.co/t/custom-logo-kibana-7-9-2-guide/250814/4 "2020-10-09T14:20:32Z")
> [@ManuelF](#): > > npx gzip-cli /usr/share/kibana/x-pack/plugins/security/target/public/4.plugin.js -e=gz -e=br 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. ---
**Author:** ![ManuelF](https://avatars.discourse-cdn.com/v4/letter/m/e99b99/32.png) [@ManuelF](https://discuss.elastic.co/u/ManuelF)\ **Post date:** [October 9, 2020, 3:31pm UTC](https://discuss.elastic.co/t/custom-logo-kibana-7-9-2-guide/250814/5 "2020-10-09T15:31:03Z")
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! ---
**Author:** ![lquin1978](https://avatars.discourse-cdn.com/v4/letter/l/5daacb/32.png) [@lquin1978](https://discuss.elastic.co/u/lquin1978)\ **Post date:** [October 9, 2020, 4:53pm UTC](https://discuss.elastic.co/t/custom-logo-kibana-7-9-2-guide/250814/6 "2020-10-09T16:53:28Z")
Thank you for your reply but I have already installed npm. the subsequent command appears to run but then provides the error I provided ---
**Author:** ![ManuelF](https://avatars.discourse-cdn.com/v4/letter/m/e99b99/32.png) [@ManuelF](https://discuss.elastic.co/u/ManuelF)\ **Post date:** [October 9, 2020, 7:47pm UTC](https://discuss.elastic.co/t/custom-logo-kibana-7-9-2-guide/250814/7 "2020-10-09T19:47:56Z")
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. ---
**Author:** ![ManuelF](https://avatars.discourse-cdn.com/v4/letter/m/e99b99/32.png) [@ManuelF](https://discuss.elastic.co/u/ManuelF)\ **Post date:** [October 16, 2020, 3:49pm UTC](https://discuss.elastic.co/t/custom-logo-kibana-7-9-2-guide/250814/8 "2020-10-16T15:49:38Z")
**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 ---
**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\ **Post date:** [November 13, 2020, 3:49pm UTC](https://discuss.elastic.co/t/custom-logo-kibana-7-9-2-guide/250814/9 "2020-11-13T15:49:40Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.