Replace the kibana logo?

Elastic Stack Kibana
41

I just did this with Kibana 5.5, the file I changed was at:

/home/elastic/kibana-5.5.0-linux-x86_64/src/ui/public/images/kibana.svg

I imported my .svg and renamed it to match the existing kibana.svg

After changing it, I bounced Kibana, but no luck.

To get the image to appear I had to force the JS to recompile, meaning I had to install a plugin.

I chose this plugin, once the plugin was installed, I restarted Kibana, and my .svg was there!

42

I tried this and the loading logo changed instead of the logo on the left hand upper corner of the dashboard. Any idea why this could be happening? I'm using version 5.6

43

I guess the Kibana executable need to be re-bundled/re-optimized after changes. Any idea how this can be acheived?

1 Like
44

There's no such file in the 5.6.2 verison

45

Go to the file : kibana-5.6.2/optimize/bundles/commons.style.css
search - logo.kibana
you will see a url in it . delete that url and replace it with your URL

1 Like
46

You can also write a kibana plugin and introduce a 'hack' to override the default CSS.
This will help you in maintenance as well as version upgrades.

47

it's work for version 5.4 with instruction of @dedebe
thank's

48

hello @LeeDr
in your comment :
"Then I stopped Kibana again, deleted everything from the optimize directory, started Kibana, waited for Optimizing to finish, refreshed my browser, and saw the modified image."

I'm confused between build and start!
when I need to use the build after add modification ( for information i use open source kibana 5.4)?
and when i need to use just npm strat after modification ?
Can you explain this to me, please?

thanks
radi

49

Kibana custom logo replace change - Kibana - Discuss the Elastic Stack

I was able to do it with kibana5.x and 6.x

50

Did anyone try with 6.1.3 ?

51

Shouldn't be any different on 6.1.3 as well. Try it and let us know .

Cheers
Rashmi

52

Hey Guys!

Thank you for all your suggestions! I've done this using Ansible 2.5.0 and Kibana 6.2.3 and worked like a charm.

Here are the important bits, using an Ansible role:

default:

main.yml

---
kibana_path: '/usr/share/kibana'

files:

kibana/custom.styles.css

.global-nav .logo-small.kibana,
.global-nav .logo.kibana {
    /* background-color: #333333; */
    /* override the background */
    background-image: url(__REPLACE_WITH_PUBLIC_PATH__custom_logo.svg);
    /* replace kibana Logo */
}

kibana/custom_logo.svg

handlers:

main.yml

---
- name: Restart kibana
  service:
    name: kibana
    state:  restarted

tasks:

main.yml

---
- name: Kibana | Custom Logo 1/2 | Copy files
  copy:
    src: "{{ item }}"
    dest: "{{ kibana_path }}/optimize/bundles"
    owner: kibana
    group: kibana
    mode: 0775
  with_fileglob:
    - kibana/*

- name: Kibana | Custom Logo 2/2 | Add CSS config
  lineinfile:
    path: "{{ kibana_path }}/src/ui/ui_render/views/ui_app.jade"
    regexp: "custom.style.css"
    insertafter: "commons.style.css"
    line: "        bundleFile('custom.style.css'),"
    backup: yes
    state: present
  notify:
    - Restart kibana

Regards

53

In Kibana 5.6.2 we do not have the "images" folder under "public".
Can anyone please help on the same?

Regards

54

Tested on 5.6.2 and it didn't work. Any help?

55

Hi, did you try with Kibana v7.6.0 ? Any help

56

Also searching help for changing Logo in Version 7.6....

57

The Kibana logo for 7.6.0 is create in <kibana-home>/node_modules/@kbn/ui-shared-deps/target/icon.logo_kibana-js.js.

58

FYI for anyone needing it, I did this for 7.6.2.. Logo change

59

the file is at '/usr/share/kibana/src/ui/public/images' it's develop path, not produce path.

60

/usr/share/kibana/src/ui/public/images