Tricks

Websites favicon as dynamic images for Google Data Studio reports

March 9, 2022 - by Mehdi Oudjida
Websites favicon as dynamic images for Google Data Studio reports

Few months ago, I’ve discovered a nice Google hidden URL thanks to a tweet from Ben Collins about a Google Sheets tip. If you use Sheets, I strongly recommend to follow Ben and enjoy what he shares every day. Thank you also to James Ivings, getting the credits to the original idea.

This Google hidden URL, provides the favicon image of any website. It is really nice, considering that it is free pictures resource, already hosted and available, and you can request it just through a URL with the website hostname as a query parameter.

So, for our data visualisation concerns, it is quite perfect inside Google Data Studio, improving graphic rendering with some brand logos, easily matched with your dynamic data.

Structure of the Google favicon hidden URL

You will find the Google URL below. The URL ends with 2 query parameters:

  • sz is the size (pixels) of the favicon regarding the available sizes provided by the site owner. 64 pixels in the example below
  • domain is the hostname of the website, here the value is “mywebsite.com”
https://s2.googleusercontent.com/s2/favicons?sz=64&domain=mywebsite.com

So, to include favicons in our Data Studio reports, of course, we can add an image element and fill as URL the right value with the wished domain like below. Quite easy for static data with distant picture.

But the point of this post is doing the same with dynamic data, inside our charts. Dynamic images are not allowed for most of Data Studio chart types. In the example below, we will work on a table chart with metric column displayed as horizontal bars.

Calculated field

First, let’s build – inside the data source – a new calculated field that will use a dimension value as input corresponding to the favicon hostname ; and return the favicon image as output.

The “Favicon hostname” field needs to be prepared upstream. On the example below, it is about Google Analytics source field, cleaned & filtered.

Favicon image
IMAGE(CONCAT("https://s2.googleusercontent.com/s2/favicons?sz=64&domain=",Favicon hostname))

Chart update

Now, let’s change our existing table chart to replace the source hostnames by the related pictures.

Voilà

Quite simple tip! I let you imagine the kind of use cases that can take advantage of favicons:

  • Brands for e-commerce performance
  • Vendors for licenses spending
  • Traffic acquisition partners for conversions attribution
  • …