Custom Favicons for Production and Order

Philipp Krenn — Fri, 31 Jul 2020 00:00:00 +0000

Favicons — the little pictures in your bookmarks and (way too many) open browser tabs — are great to see what is what quickly. Unless it all looks like this:

Those tabs are the Elastic Cloud admin UI, the Elasticsearch documentation, elastic.co, Kibana on Elastic Cloud, and Kibana on localhost.

Why Are All My Icons the Same? #

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.

Tab Modifier Plugin to the Rescue #

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.

After installing the plugin, you can define its rules. For example, the Elastic documentation is under the URL https://www.elastic.co/guide/, which you can target with the following rule:

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 https://cloud.elastic.co.
Any Kibana instance on Elastic Cloud contains .found.io:9243/.
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 localhost:1313/).

Reloading each tab, you will now know what is what right away:

This approach can also “hide” your Twitter, YouTube,… tabs at work, which seems to be one of the intended use-cases.

PS: The favicon behavior will change again in Kibana 7.12.0 based on this pull request. Once it has been released, this post will get an update.

Favicon by Philipp Krenn

Custom Favicons for Production and Order

Why Are All My Icons the Same? #

Tab Modifier Plugin to the Rescue #