From a company’s perspective, it makes sense to stick to a single consistent icon. Especially casual users might have a hard time remembering a set of icons for a single organization. The same goes for the product view — those are all pieces of the Elastic Stack. What started as a UI for Elasticsearch has evolved into more than just the classic visualizations, which are part of a bigger picture. Kibana has become the general window into the Elastic Stack with different solutions and the overall management.
But none of that helps you as a heavy user if you have multiple tabs open and no easy way to tell what was the documentation and what the production or development Kibana instances. It is a bit of a pain point, but you can fix it with a little hack.
The Tab Modifier plugin for Chrome and compatible browsers can replace favicons based on the URL fragment. While it hasn’t been updated in over two years, it’s doing its job.
The only thing missing now is the icon. For this scenario, you can download the Elastic brand assets, which contain both the company as well as the solution and product logos. Picking the intended logo as an SVG (Chrome supports that since version 80) from the download you can convert it to a data URI and paste the result into the icon field. That’s it.
You need to add three more rules to fix the example from the top:
- The Elastic Cloud admin UI starts with
- Any Kibana instance on Elastic Cloud contains
- Any local Kibana installation contains
localhost:5601/— supporting both HTTP and HTTPS but expecting the default Kibana port (so I won’t confuse it with Hugo on
PS: This approach can also “hide” your Twitter, YouTube,… tabs at work, which seems to be one of the intended use-cases.