# Replace the kibana logo?

**URL:** <https://discuss.elastic.co/t/replace-the-kibana-logo/27547>\
**Category:** Kibana\
**Created:** [August 18, 2015, 3:56am UTC](https://discuss.elastic.co/t/replace-the-kibana-logo/27547 "2015-08-18T03:56:00Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![LeeDr](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/leedr/32/9289_2.png) [@LeeDr](https://discuss.elastic.co/u/LeeDr)\
**Post date:** [October 26, 2016, 9:51pm UTC](https://discuss.elastic.co/t/replace-the-kibana-logo/27547/21 "2016-10-26T21:51:59Z")

</div>

I just tested this in the 5.0.0 release and was able to change the kibana.svg logo file and see the results in Kibana. Here's what I did;

I used InkScape to edit src/ui/public/images/kibana.svg and saved it.  
I copied that modified file to optimize/bundles/src/ui/public/images on top of the kibana.svg that was there.  
I refresh my browser and saw the modified image.

Then, just to be sure, I stopped Kibana, started Kibana, refreshed my browser, and saw the modified image.

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.

Lee

---

<div class="post-metadata">

**Author:** ![seth.yes](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/seth.yes/32/11788_2.png) [@seth.yes](https://discuss.elastic.co/u/seth.yes)\
**Post date:** [October 26, 2016, 10:36pm UTC](https://discuss.elastic.co/t/replace-the-kibana-logo/27547/22 "2016-10-26T22:36:14Z")

</div>

@LeeDr We're talking about the icon that shows up in your tab. It's named 'elk.ico'

---

<div class="post-metadata">

**Author:** ![LeeDr](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/leedr/32/9289_2.png) [@LeeDr](https://discuss.elastic.co/u/LeeDr)\
**Post date:** [October 28, 2016, 1:24pm UTC](https://discuss.elastic.co/t/replace-the-kibana-logo/27547/23 "2016-10-28T13:24:56Z")

</div>

I just completed a similar set of steps to change elk.ico in Kibana 4.6.1 on Ubuntu (installed from .deb package);

I edited the icon at /opt/kibana/src/ui/public/images/elk.ico  
(if you're on a different platform or just un-tarred the tar.gz your path may be different)

I saved my edit on top of that same elk.ico file.

I copied that file to /opt/kibana/optimize/bundles/src/ui/public/images/elk.ico

I restarted Kibana service (not sure if this was necessary).

I opened Chromium browser and cleared all my cache and history.

I opened Kibana in that browser, and it shows the modified icon on the tab and on bookmarks bar where I just saved it to.

Now I refreshed Kibana in Firefox without closing the tab or clearing history. I see the old tab icon.

I closed that Firefox tab and reopened Kibana and I see the modified icon.

Lee

---

<div class="post-metadata">

**Author:** ![seth.yes](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/seth.yes/32/11788_2.png) [@seth.yes](https://discuss.elastic.co/u/seth.yes)\
**Post date:** [November 2, 2016, 10:59pm UTC](https://discuss.elastic.co/t/replace-the-kibana-logo/27547/24 "2016-11-02T22:59:08Z")

</div>

Thanks @LeeDr that did work for me, I may have had the incorrect elk.ico file saved locally. Thanks for the help.

---

<div class="post-metadata">

**Author:** ![Ravikumar\_G](https://avatars.discourse-cdn.com/v4/letter/r/71e660/32.png) [@Ravikumar\_G](https://discuss.elastic.co/u/Ravikumar_G)\
**Post date:** [December 14, 2016, 3:43am UTC](https://discuss.elastic.co/t/replace-the-kibana-logo/27547/25 "2016-12-14T03:43:33Z")

</div>

Any One tried in Kibana 5.0.2

I don't see any src/ folder exists in Centos 7.1 installed with rpm package

---

<div class="post-metadata">

**Author:** ![Jose\_Campos](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jose_campos/32/11259_2.png) [@Jose\_Campos](https://discuss.elastic.co/u/Jose_Campos)\
**Post date:** [February 6, 2017, 6:13pm UTC](https://discuss.elastic.co/t/replace-the-kibana-logo/27547/26 "2017-02-06T18:13:25Z")

</div>

Hi

This is the path for Kibana 5: /usr/share/kibana/optimize/bundles/src/ui/public/images

You should convert the .png file to .svg

Greetings

---

<div class="post-metadata">

**Author:** ![Ravikumar\_G](https://avatars.discourse-cdn.com/v4/letter/r/71e660/32.png) [@Ravikumar\_G](https://discuss.elastic.co/u/Ravikumar_G)\
**Post date:** [February 6, 2017, 7:04pm UTC](https://discuss.elastic.co/t/replace-the-kibana-logo/27547/27 "2017-02-06T19:04:48Z")

</div>

Thanks very much just change file but Kibana shows just pink tab with no name giving it reboot to see if it will change anything

should the name of new image should stay kibana.svg only ?

---

<div class="post-metadata">

**Author:** ![Jose\_Campos](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jose_campos/32/11259_2.png) [@Jose\_Campos](https://discuss.elastic.co/u/Jose_Campos)\
**Post date:** [February 6, 2017, 9:43pm UTC](https://discuss.elastic.co/t/replace-the-kibana-logo/27547/28 "2017-02-06T21:43:04Z")

</div>

Yup, only kibana.svg.

You can convert it with inkscape. 🙂

---

<div class="post-metadata">

**Author:** ![Rinat](https://avatars.discourse-cdn.com/v4/letter/r/dec6dc/32.png) [@Rinat](https://discuss.elastic.co/u/Rinat)\
**Post date:** [February 20, 2017, 2:52pm UTC](https://discuss.elastic.co/t/replace-the-kibana-logo/27547/29 "2017-02-20T14:52:57Z")

</div>

Did the kibana.svg size requirement change in Kibana 5.x version?  
I changed it as suggested to 252x45 px and it looks half of the logo place in the top left corner.

Thanks

---

<div class="post-metadata">

**Author:** ![weltenwort](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/weltenwort/32/53885_2.png) [@weltenwort](https://discuss.elastic.co/u/weltenwort)\
**Post date:** [February 20, 2017, 3:09pm UTC](https://discuss.elastic.co/t/replace-the-kibana-logo/27547/30 "2017-02-20T15:09:46Z")

</div>

The logo is scaled to 140x50px:  
 ![](https://us1.discourse-cdn.com/elastic/original/2X/e/ecef954372d87ed5894e1321b501b556b2553a0c.png)

---

<div class="post-metadata">

**Author:** ![BMV](https://avatars.discourse-cdn.com/v4/letter/b/e47c2d/32.png) [@BMV](https://discuss.elastic.co/u/BMV)\
**Post date:** [June 1, 2017, 10:13am UTC](https://discuss.elastic.co/t/replace-the-kibana-logo/27547/31 "2017-06-01T10:13:23Z")

</div>

Hi all,

Has anyone been able to change the logo image on the top left hand corner in Kibana 5.4.0 yet?

![](https://us1.discourse-cdn.com/elastic/original/3X/c/2/c21e5c0b736bd2e8b9352b0992d46a1943d8ccaf.png)

I haven't had any success by following the instructions mentioned above.

Thanks

---

<div class="post-metadata">

**Author:** ![Daya](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/daya/32/18710_2.png) [@Daya](https://discuss.elastic.co/u/Daya)\
**Post date:** [June 1, 2017, 12:30pm UTC](https://discuss.elastic.co/t/replace-the-kibana-logo/27547/32 "2017-06-01T12:30:13Z")

</div>

You can change it by replacing the file "0cebf3d61338c454670b1c5bdf5d6d8d.svg" present under the directory "/usr/share/kibana/optimize/bundles/".Images with png extension works as well.Refreshing the browser alone is sufficient. Tested on ESv5.4

---

<div class="post-metadata">

**Author:** ![BMV](https://avatars.discourse-cdn.com/v4/letter/b/e47c2d/32.png) [@BMV](https://discuss.elastic.co/u/BMV)\
**Post date:** [June 2, 2017, 6:36am UTC](https://discuss.elastic.co/t/replace-the-kibana-logo/27547/33 "2017-06-02T06:36:56Z")

</div>

Thanks mate... worked like a charm!

---

<div class="post-metadata">

**Author:** ![tatdat](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tatdat/32/113160_2.png) [@tatdat](https://discuss.elastic.co/u/tatdat)\
**Post date:** [June 6, 2017, 3:28am UTC](https://discuss.elastic.co/t/replace-the-kibana-logo/27547/34 "2017-06-06T03:28:39Z")

</div>

i prefer change in source, becasue if u replace logon in optimize bundles, when u install or remove, i need replace logo again.

If u want change logo from source, u need edit file

> [kibana directory]/src/ui/views/chrome.jade

Find class

> .kibanaWelcomeLogo

u can see this line

> background-image: url("here\_is\_image\_base\_64.");

U need convert ur logo to base 64 and rplace content

---

<div class="post-metadata">

**Author:** ![dedebe](https://avatars.discourse-cdn.com/v4/letter/d/c6cbf5/32.png) [@dedebe](https://discuss.elastic.co/u/dedebe)\
**Post date:** [June 20, 2017, 5:42pm UTC](https://discuss.elastic.co/t/replace-the-kibana-logo/27547/35 "2017-06-20T17:42:26Z")

</div>

Like as the solution from Tat Dat Pham,

you can also modify [kibana directory]/src/ui/views/ **ui\_app**.jade

At the line 96: `| Loading MY fancy statistics`  
for edditing you own loading dashboard text

At line 107: include your own style file `bundleFile('MY.style.css');`

it would look like this:  
` var files = [ bundleFile('commons.style.css'),`  
**bundleFile('MY.style.css'),**  
` bundleFile('#{app.id}.style.css'), bundleFile('commons.bundle.js'), bundleFile('#{app.id}.bundle.js') ];`

and in the path Daya mentioned

> "/usr/share/kibana/optimize/bundles/"

include your `MY.style.css` file.

In your own CSS file you can override every Style you want like

` .global-nav .logo-small.kibana, .global-nav .logo.kibana { background-color:#333333; /* override the pink background */ background-image: url(MY_Logo.svg); /* replace kibana Logo */ }`  
So there is no need to _remove_ any kibana's original files, for your content.

When you modified the `.jade` files you need to restart Elasticsearch.

After that you can edit your `MY.style.css` file and simply reload your browser window for styling changes.

---

<div class="post-metadata">

**Author:** ![cinayet](https://avatars.discourse-cdn.com/v4/letter/c/e9bcb4/32.png) [@cinayet](https://discuss.elastic.co/u/cinayet)\
**Post date:** [July 11, 2017, 6:19pm UTC](https://discuss.elastic.co/t/replace-the-kibana-logo/27547/36 "2017-07-11T18:19:50Z")

</div>

[Thanks](https://clipartpig.com/thank-you-for-your-support-clipart-100903) for all reponses. I appreciated:)

---

<div class="post-metadata">

**Author:** ![spacepacket](https://avatars.discourse-cdn.com/v4/letter/s/90ced4/32.png) [@spacepacket](https://discuss.elastic.co/u/spacepacket)\
**Post date:** [August 4, 2017, 8:14pm UTC](https://discuss.elastic.co/t/replace-the-kibana-logo/27547/37 "2017-08-04T20:14:55Z")

</div>

I like this technique, but when kibana re-optimizes for whatever reason, the new files go away. Where should the My.style.css and MY\_Logo.svg files be put in the kibana/src folder so that they get copied into optimize/bundles during the bundle process?

---

<div class="post-metadata">

**Author:** ![IBuiltAnElephant](https://avatars.discourse-cdn.com/v4/letter/i/77aa72/32.png) [@IBuiltAnElephant](https://discuss.elastic.co/u/IBuiltAnElephant)\
**Post date:** [August 4, 2017, 10:57pm UTC](https://discuss.elastic.co/t/replace-the-kibana-logo/27547/38 "2017-08-04T22:57:12Z")

</div>

Speaking of color changes, where should I look to change the color of the pink loading bar that appears at the top of the page?

 ![pink_loading_bar](https://us1.discourse-cdn.com/elastic/original/3X/f/d/fdf8baf4679458f354fbd2eec125f8c4b712589d.png)

---

<div class="post-metadata">

**Author:** ![Ravikumar\_G](https://avatars.discourse-cdn.com/v4/letter/r/71e660/32.png) [@Ravikumar\_G](https://discuss.elastic.co/u/Ravikumar_G)\
**Post date:** [August 15, 2017, 2:48pm UTC](https://discuss.elastic.co/t/replace-the-kibana-logo/27547/39 "2017-08-15T14:48:46Z")

</div>

![28 AM](https://us1.discourse-cdn.com/elastic/original/3X/c/1/c10655158a50660bdebf683f764f345227b09d7b.png)

Able change logo and colour

---

<div class="post-metadata">

**Author:** ![Ravikumar\_G](https://avatars.discourse-cdn.com/v4/letter/r/71e660/32.png) [@Ravikumar\_G](https://discuss.elastic.co/u/Ravikumar_G)\
**Post date:** [August 15, 2017, 2:55pm UTC](https://discuss.elastic.co/t/replace-the-kibana-logo/27547/40 "2017-08-15T14:55:39Z")

</div>

vi /usr/share/kibana/optimize/bundles/commons.style.css

[Previous page](https://discuss.elastic.co/t/replace-the-kibana-logo/27547.md?page=1)

[Next page](https://discuss.elastic.co/t/replace-the-kibana-logo/27547.md?page=3)
