# Kibana icon colorless

**URL:** <https://discuss.elastic.co/t/kibana-icon-colorless/279187>\
**Category:** Kibana\
**Created:** [July 20, 2021, 3:52pm UTC](https://discuss.elastic.co/t/kibana-icon-colorless/279187 "2021-07-20T15:52:06Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ewolfman](https://avatars.discourse-cdn.com/v4/letter/e/5f8ce5/32.png) [@ewolfman](https://discuss.elastic.co/u/ewolfman)\
**Post date:** [July 20, 2021, 3:52pm UTC](https://discuss.elastic.co/t/kibana-icon-colorless/279187/1 "2021-07-20T15:52:06Z")

</div>

Hi,

Updated from 7.10.2 to 7.13.3.  
Kibana favicon seems colorless. Any specific reason? Is this an indication to a problem?

Thanks.

---

<div class="post-metadata">

**Author:** ![wylie](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/wylie/32/81794_2.png) [@wylie](https://discuss.elastic.co/u/wylie)\
**Post date:** [July 20, 2021, 7:31pm UTC](https://discuss.elastic.co/t/kibana-icon-colorless/279187/2 "2021-07-20T19:31:11Z")

</div>

This was changed in 7.12.0. It is listed in the [complete changelog for 7.12.0](https://www.elastic.co/guide/en/kibana/7.12/enhancements-and-bug-fixes-v7.12.0.html), and here is the PR:

> <https://github.com/elastic/kibana/pull/87271>
>
> Fixes #65585
> ^ We'll need to spin off a separate issue to consider allowing cus…tom (user uploaded) favicons.
> 
> \## Summary
> 
> To better differentiate Kibana browser tabs from other Elastic proporties, this PR changes the favicon in the following ways:
> 1. When running Kibana from a build, displays the monochrome version of the Elastic cluster \[1\]
> 2. When running Kibana from source, displays a filled version of the Elastic cluster \[2\]
> 3. Changes the favicon fill color based upon the current operating system color theme via the \`prefers-color-scheme\` media query \[3\]
> 4. Removes unnecessary favicon files for unsupported browsers \[4\]
> 
> \### Sample screenshots from Firefox
> 
> \<img width="958" alt="Screen Shot 2021-01-05 at 5 30 53 PM" src="https://user-images.githubusercontent.com/446285/103711087-4198bd00-4f7c-11eb-9873-dea48683a15f.png"\>
> 
> \### How to test
> 1. Start up Kibana; see the new favicon in your browser tab.
> 2. Change your system theme (between dark/light), then hard refresh your browser (some waiting may be necessary).
> 3. \[Generate a build\](https://github.com/elastic/kibana/tree/master/src/dev/build) and see that the favicon.svg (and .png) files under \`kibana/build/kibana-oss/src/core/server/core\_app/assets/favicons/\` have been replaced withe outlined version (I used this command to try and minimize the load \`node scripts/build --oss --skip-archives --skip-os-packages --skip-docker-ubi\`). Technically, the \`favicon.build.svg\` and \`favicon.build.png\` files in the source repo directory have been copied over top of the filled \`favicon.svg\` and \`favicon.png\` versions.
> 
> \<img width="488" alt="Screen Shot 2021-01-05 at 5 37 13 PM" src="https://user-images.githubusercontent.com/446285/103711272-b2d87000-4f7c-11eb-8da4-7da326436234.png"\>
> 
> \### Checklist
> 
> Delete any items that are not applicable to this PR.
> 
> \- \[x\] This was checked for \[cross-browser compatibility\](https://www.elastic.co/support/matrix#matrix\_browsers)
> 
> \### Footnotes
> \[1\] The monochrome version is included in the \[updated branding guidelines\](https://brand.elastic.co/302f66895/p/06c73c-elastic-logo/t/14994f) and, thus, has been used for the built version. This means we are only distributing the brand-adhering, monochrome version.
> \[2\] With guidance from Spencer, this approach is preferred over leveraging the \`env.mode\`\` variable which is discouraged. 
> \[3\] There a few ways to accomplish this effect, but the majority favored the \[SVG\](https://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them/#dark-mode-support) \[style\](https://flaviocopes.com/dark-mode-favicon/) \[approach\](https://catalin.red/svg-favicon-light-dark-theme/) versus \[using Javascript\](https://css-tricks.com/how-to-create-a-favicon-that-changes-automatically/). After reading through those and testing some things out, I chose the SVG with embedded \`style\` approach as it avoids the need for Javascript and reduces the number of graphic files needed. Also, it just plain worked with our existing setup.
> \[4\] The major browsers, supported by Kibana, \[support SVG favicons with the exception of Safari\](https://caniuse.com/link-icon-svg). A fallback, black PNG favicon has been included to accommodate Safari (see screenshot above) and, as a side effect, likely works for several other browsers. For more information on favicon files, \[this article was very helpful\](https://css-tricks.com/favicon-quiz/).
> \<img width="310" alt="Screen Shot 2020-12-22 at 9 09 14 AM" src="https://user-images.githubusercontent.com/446285/102913853-fd1e0500-4444-11eb-9cbe-92f71094c197.png"\>

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [August 17, 2021, 7:31pm UTC](https://discuss.elastic.co/t/kibana-icon-colorless/279187/3 "2021-08-17T19:31:57Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.