Replace the kibana logo?

Elastic Stack Kibana
#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

#61

Hey Tim,

I'm Trying to change the logo for the loading page and nav bar in kibana 7.11.
can you please help me out in this