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.
wylie
(Wylie Conlon)
July 20, 2021, 7:31pm
2
This was changed in 7.12.0. It is listed in the complete changelog for 7.12.0 , and here is the PR:
elastic:master
← ryankeairns:rk/favicons
opened 05:15AM - 05 Jan 21 UTC
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">
system
(system)
Closed
August 17, 2021, 7:31pm
3
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.