# How to change the top left header logo in kibana 7.9.2 **URL:** \ **Category:** Kibana\ **Created:** [September 27, 2020, 12:25pm UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084 "2020-09-27T12:25:06Z")\ **Posts on this page:** 20\ **Page:** 2
**Author:** ![azasypkin](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/azasypkin/32/42216_2.png) [@azasypkin](https://discuss.elastic.co/u/azasypkin)\ **Post date:** [October 1, 2020, 3:57pm UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/21 "2020-10-01T15:57:51Z")
> [@witcher](#): > > @azasypkin first of all thank you. the login logo part worked but when i was trying to change the header logo after that its stuck There is a chance you've accidentally made a syntax error while editing or something, take a look at the browser console and check if there are any errors there. If yes, then try to revert `core.entry.js` and try to change it again. ---
**Author:** ![witcher](https://avatars.discourse-cdn.com/v4/letter/w/91b2a8/32.png) [@witcher](https://discuss.elastic.co/u/witcher)\ **Post date:** [October 1, 2020, 4:45pm UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/22 "2020-10-01T16:45:39Z")
@azasypkin Its running again I have set the property to `iconType:{"https://upload.wikimedia.org/wikipedia/commons/1/1e/RPC-JP_Logo.png"}` but the logo is not changing in the header ---
**Author:** ![azasypkin](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/azasypkin/32/42216_2.png) [@azasypkin](https://discuss.elastic.co/u/azasypkin)\ **Post date:** [October 1, 2020, 5:41pm UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/23 "2020-10-01T17:41:48Z")
> [@witcher](#): > > iconType:{"[https://upload.wikimedia.org/wikipedia/commons/1/1e/RPC-JP\_Logo.png](https://upload.wikimedia.org/wikipedia/commons/1/1e/RPC-JP_Logo.png)"} It should be `iconType:"https://upload.wikimedia.org/wikipedia/commons/1/1e/RPC-JP_Logo.png"`, the value of `iconType` should be a string, not an object. The only change is `"logoElastic"` to `"https://upload.wikimedia.org/wikipedia/commons/1/1e/RPC-JP_Logo.png"` the rest should stay the same. > `iconType={"https://some-host/some-picture.png"}` I think you're confused by this. This is from one of my previous posts, such format only works when you edit **source code** /JSX, but you're editing compiled JavaScript, so the format should be `iconType:"https://upload.wikimedia.org/wikipedia/commons/1/1e/RPC-JP_Logo.png"` ---
**Author:** ![witcher](https://avatars.discourse-cdn.com/v4/letter/w/91b2a8/32.png) [@witcher](https://discuss.elastic.co/u/witcher)\ **Post date:** [October 1, 2020, 5:52pm UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/24 "2020-10-01T17:52:42Z")
@azasypkin tried it mate did not work ☹ ---
**Author:** ![azasypkin](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/azasypkin/32/42216_2.png) [@azasypkin](https://discuss.elastic.co/u/azasypkin)\ **Post date:** [October 1, 2020, 6:39pm UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/25 "2020-10-01T18:39:29Z")
I am out of ideas to be honest. If you edited the right file, the right place in this file and regenerated gz/br files then it _should_ work, like it works for the login page. I can share my edited file tomorrow so that you can compare. ---
**Author:** ![witcher](https://avatars.discourse-cdn.com/v4/letter/w/91b2a8/32.png) [@witcher](https://discuss.elastic.co/u/witcher)\ **Post date:** [October 1, 2020, 6:58pm UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/26 "2020-10-01T18:58:02Z")
@azasypkin Thank you so much mate, really thanks for your effort, patience , time & dedication. You have helped me and have been patient with me throughout you even cleared some of my concepts in the process. Cheers🙂 ---
**Author:** ![ManuelF](https://avatars.discourse-cdn.com/v4/letter/m/e99b99/32.png) [@ManuelF](https://discuss.elastic.co/u/ManuelF)\ **Post date:** [October 1, 2020, 7:22pm UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/27 "2020-10-01T19:22:52Z")
@azasypkin, I still don't give up. Like I said before, I successfully changed the following components: - Loading logo - Loading text - Favicon - Tab tex Now I am trying to change the Login logo, and I am very excited, because for the very first time someone mentioned the compressed versions of the files. Of course. This is why, when I edited the files, even after restarting Kibana, I didn't see any changes and it seemed that the new code was being ignored. This time I modified both, the `.js` and the `.gz` file. Still did not see the result I was expecting, but at least something happened. I got a redundancy error, but perhaps I introduced errors in the code. I can confirm that the remote image works `https://upload.wikimedia.org/wikipedia/commons/1/1e/RPC-JP_Logo.png`, but I am trying to use a `base64` image instead of a remote image. Can you help me a little bit more and let me know which of the following options is correct?: - `"img", {src:'data:image/png;base64,iVBORw0K ... '}` - `url('data:image/png;base64,iVBORw0KGgo...')` - `"data:image/png;base64,iVBORw0K ..."`? Thank you ---
**Author:** ![ManuelF](https://avatars.discourse-cdn.com/v4/letter/m/e99b99/32.png) [@ManuelF](https://discuss.elastic.co/u/ManuelF)\ **Post date:** [October 1, 2020, 9:39pm UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/28 "2020-10-01T21:39:53Z")
I am very close to my goal. Now I can upload my custom images with format like `"data:image/png;base64,iVBORw0K ..."`, but image appears too small, it does not matter if I change the size in the source and recompile the `base64` image. Is there way to increase the size to make it bigger? The default for that field is `xxl`, which is very small. I tried `original`, but I may have to reduce my image, because it went out from the right place were it should stay. ---
**Author:** ![azasypkin](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/azasypkin/32/42216_2.png) [@azasypkin](https://discuss.elastic.co/u/azasypkin)\ **Post date:** [October 2, 2020, 6:16am UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/29 "2020-10-02T06:16:49Z")
> [@ManuelF](#): > > I am very close to my goal. Now I can upload my custom images with format like `"data:image/png;base64,iVBORw0K ..."` , Have you tried SVGs (`data:image/svg+xml;base64`, compressed files contain a bunch of them as well)? [The components we use](https://elastic.github.io/eui/#/) are optimized to work with SVGs. Also once you figure this out, can you share your modified files with @witcher (just to do a `diff` and see where the difference between your and their changes)? You can also take a look [at mine](https://gist.github.com/azasypkin/c7c0ddf487833c42483996f2a9e459cc/raw/8cdda97b0805fd314699b99877bc5ab9dd82d7eb/changed-logos-files.zip) (uses SVG-data URIs for login logo and top header, source and compressed versions, but please just use it for `diff`, **never ever** run anything that a random person on the internet shares with you). ![Screenshot from 2020-10-02 08-22-43](https://us1.discourse-cdn.com/elastic/original/3X/f/a/fae927415d80fbeb894c9efc5314cbddb2d0a747.png) > @azasypkin tried it mate did not work Make sure you clear browser cache, because it's supposed to cache assets pretty aggressively. E.g. if you refresh page with browser dev tools open usually it doesn't respect cache or depending on the browser you may have to turn that option on. Best, Oleg ---
**Author:** ![witcher](https://avatars.discourse-cdn.com/v4/letter/w/91b2a8/32.png) [@witcher](https://discuss.elastic.co/u/witcher)\ **Post date:** [October 2, 2020, 7:47am UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/30 "2020-10-02T07:47:59Z")
> [@azasypkin](#): > > > [@ManuelF](#): > > > > I am very close to my goal. Now I can upload my custom images with format like `"data:image/png;base64,iVBORw0K ..."` , > > Have you tried SVGs (`data:image/svg+xml;base64`, compressed files contain a bunch of them as well)? [The components we use](https://elastic.github.io/eui/#/) are optimized to work with SVGs. > > Also once you figure this out, can you share your modified files with @witcher (just to do a `diff` and see where the difference between your and their changes)? > > You can also take a look [at mine](https://gist.github.com/azasypkin/c7c0ddf487833c42483996f2a9e459cc/raw/8cdda97b0805fd314699b99877bc5ab9dd82d7eb/changed-logos-files.zip) (uses SVG-data URIs for login logo and top header, source and compressed versions, but please just use it for `diff`, **never ever** run anything that a random person on the internet shares with you). > > ![Screenshot from 2020-10-02 08-22-43](https://us1.discourse-cdn.com/elastic/original/3X/f/a/fae927415d80fbeb894c9efc5314cbddb2d0a747.png) > > > @azasypkin tried it mate did not work > > Make sure you clear browser cache, because it's supposed to cache assets pretty aggressively. E.g. if you refresh page with browser dev tools open usually it doesn't respect cache or depending on the browser you may have to turn that option on. > > Best, > Oleg @azasypkin I did change the core.entry.js file set the property to this just as it was in your changed files. `iconType:"data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22euiIcon%20euiIcon--medium%20euiIcon-isLoaded%22%20focusable%3D%22false%22%20role%3D%22img%22%20aria-hidden%3D%22true%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23FFAE00%22%20d%3D%22M16%2032L0%2011.454l6.931-10.38L16%200l9.069%201.074L32%2011.454z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23EC6C00%22%20d%3D%22M16%2032L0%2011.454h32z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23FFAE00%22%20d%3D%22M16%2032L6.477%2011.454h19.045z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23FFEFB4%22%20d%3D%22M16%200L6.477%2011.454h19.045z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23FFAE00%22%20d%3D%22M6.932%201.074L3.369%206.3.001%2011.454h6.542zM25.069%201.074L28.632%206.3%2032%2011.454h-6.542z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23FED305%22%20d%3D%22M6.931%201.074l-.453%2010.38L16%200zM25.069%201.074l.453%2010.38L16%200z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E"` then I used this command to generate the zip file and the br file note that this command worked with the login page. `npx gzip-cli ..kibana-7.9.2-windows-x86_64\src\core\target\public\core.entry.js -o ..kibana-7.9.2-windows-x86_64\src\core\target\public --extension=gz --extension=br ` I always clear the cache after every change I make. I literally don't have a clue about where I am going wrong. ---
**Author:** ![azasypkin](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/azasypkin/32/42216_2.png) [@azasypkin](https://discuss.elastic.co/u/azasypkin)\ **Post date:** [October 2, 2020, 8:10am UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/31 "2020-10-02T08:10:19Z")
> [@witcher](#): > > I literally don't have a clue about where I am going wrong. Hmm, do you see any difference between your `core.entry.js` and mine? Also check in network tab the actual content of the file that server returns to you, e.g. in my case it's `http://localhost:5601/33984/bundles/core/core.entry.js`. ---
**Author:** ![azasypkin](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/azasypkin/32/42216_2.png) [@azasypkin](https://discuss.elastic.co/u/azasypkin)\ **Post date:** [October 2, 2020, 8:21am UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/32 "2020-10-02T08:21:33Z")
Also if you temporarily remove `.gz` and `.br` files Kibana should serve you original non-compressed JS file - just to reduce a number of "variables" while you're debugging. ---
**Author:** ![witcher](https://avatars.discourse-cdn.com/v4/letter/w/91b2a8/32.png) [@witcher](https://discuss.elastic.co/u/witcher)\ **Post date:** [October 2, 2020, 8:37am UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/33 "2020-10-02T08:37:31Z")
> [@azasypkin](#): > > > [@witcher](#): > > > > I literally don't have a clue about where I am going wrong. > > Hmm, do you see any difference between your `core.entry.js` and mine? Also check in network tab the actual content of the file that server returns to you, e.g. in my case it's `http://localhost:5601/33984/bundles/core/core.entry.js`. @azasypkin I did check the URL it's the same in my case `http://localhost:5601/33984/bundles/core/core.entry.js` but for some reason this property is same in here it has not changed. ``` iconType:"logoElastic" ``` ---
**Author:** ![azasypkin](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/azasypkin/32/42216_2.png) [@azasypkin](https://discuss.elastic.co/u/azasypkin)\ **Post date:** [October 2, 2020, 9:54am UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/34 "2020-10-02T09:54:38Z")
> [@witcher](#): > > but for some reason this property is same in here it has not changed. That's weird and I'm wondering if your Kibana is running from a different place or something. ---
**Author:** ![witcher](https://avatars.discourse-cdn.com/v4/letter/w/91b2a8/32.png) [@witcher](https://discuss.elastic.co/u/witcher)\ **Post date:** [October 2, 2020, 10:50am UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/35 "2020-10-02T10:50:00Z")
@azasypkin I don't think so because the login page is changed . ---
**Author:** ![witcher](https://avatars.discourse-cdn.com/v4/letter/w/91b2a8/32.png) [@witcher](https://discuss.elastic.co/u/witcher)\ **Post date:** [October 2, 2020, 2:30pm UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/36 "2020-10-02T14:30:30Z")
@azasypkin no it is not i installed kibana again too the login page although does update the logo however the header does not change and in the URL ``` http://localhost:5601/33984/bundles/core/core.entry.js iconType:"logoElastic" ``` and not the svg image ☹ ---
**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:42pm UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/37 "2020-10-02T15:42:57Z")
Hi @azasypkin and @witcher, I have created and shared a guide, showing the steps for customizing the Kibana UI components, that I have been able to apply thus far. I was able to customize the Login logo just the way I was looking for. Now I will deal with the top left header logo. > [@Custom Logo Kibana 7.9.2 (guide)](https://discuss.elastic.co/t/custom-logo-kibana-7-9-2-guide/250814): > > 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… ---
**Author:** ![witcher](https://avatars.discourse-cdn.com/v4/letter/w/91b2a8/32.png) [@witcher](https://discuss.elastic.co/u/witcher)\ **Post date:** [October 2, 2020, 3:46pm UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/38 "2020-10-02T15:46:52Z")
@ManuelF Wow thanks. quick question how do you put the svg because in my case the svg file is big which causes a recursive error? and how to put text below "Welcome toElastic"? ---
**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, 4:00pm UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/39 "2020-10-02T16:00:40Z")
Well, I haven't try with SVG files, but perhaps what you need to do is to reduce the size of the source image file. This will generate a smaller SVG file. I also had the recursive error, but I was generating a base64 file from an original image that was 721x689px. I recommend to use a source image with size between 90px and 100x, but can try a different size. Just try to reduce the source image. And for the text do the following: - 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:"custom_text"}` - Save changes to JavaScript file and generate the compressed files. Update files permissions. Then restart Kibana. `$ npx gzip-cli /usr/share/kibana/x-pack/plugins/security/target/public/4.plugin.js -e=gz -e=br` ---
**Author:** ![witcher](https://avatars.discourse-cdn.com/v4/letter/w/91b2a8/32.png) [@witcher](https://discuss.elastic.co/u/witcher)\ **Post date:** [October 2, 2020, 4:24pm UTC](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084/40 "2020-10-02T16:24:48Z")
@ManuelF I will try reducing the source file. what I am saying is i want to add text below the "Welcome to Elastic" statement [Previous page](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084.md?page=1) [Next page](https://discuss.elastic.co/t/how-to-change-the-top-left-header-logo-in-kibana-7-9-2/250084.md?page=3)