Build trust - The favicon

Reputation is one of the (email) marketing “buzzwords” of the moment. With the new inbox regulations of Yahoo and Google, building trust is more important than ever. There are several ways to build trust with your (potential) customers, especially in the inbox! However, in this blog post, I will take a look at building trust after reaching the inbox by using the favicon in two places in Dynamics Customer Insights – Journeys. Same technique, same outcome, two use cases 😊

The favicon

Favicon, one of those words that you can pronounce in two ways, either ‘favicon’ or ‘fav icon’. Choose your pick 😉 It is a combination of the words ‘favorite’ and ‘icon’. A favicon is the image that you see next to your webpage title in a web browser. It gives the visitor a feeling of trust when it visits your website, because it recognizes your logo.

It also serves as a convenient search attribute in your favorites list!

The technique

There are a lot of possibilities for the size of the favicon, but taking a look at the two use cases we have, we will focus on the following four sizes:

1. 32x32 > Standard for most desktop browsers
2. 180x180 > iOS preferred
3. 192x192 > Google Developer Web App Manifest Recommendation
4. 270x270 > Chrome Web Store icon & Small Windows 8 Star Screen Icon

So you need to create four PNG images of your logo in the above sizes and save them on your website. Nearly all of the times, you can find these images in the header of the html of your homepage, so you don’t need to create them again.

Now we need to create four lines of code:

<link rel="icon" href="/favicon-32x32.png" sizes="32x32" />
<link rel="icon" href="/favicon-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="/favicon-180x180.png" />
<meta name="msapplication-TileImage" content="/favicon-270x270.png" />

This code can be used in the following two use cases.

Use case #1

Your Real Time Marketing Preference Center

If you take a look at your Preference Center in your web browser, you’ll probably see something like this:

That is not what we want!

So open the HTML editor of your Preference Center in your Compliancy Profile. Paste the four lines of code, above the <style> section of your HTML, so it looks like this:

By the way, if you want to change the title “Preference Center” in your web browser tab, please adjust the text between the <title></title> elements as well.

So here is the comparison:

I know what I would prefer, especially since the URL of these Preference Centers are not branded (yet).

Use case #2

Your Real Time Marketing Emails

Since the December update, it is (finally) possible to add a web version link to your Real Time Marketing Emails. Read the blog post of Megan V Walker on how to do this and read a previous post of mine on best practices when it comes to the web version link.

Now that it is possible, let’s take a look at your web version Emails in your web browser. You probably will see something like this:

Like the Preference Center, we don’t want this here either. So let’s copy the four lines of code again, open up the HTML editor and paste the code before the <style> section, so it looks like this:

By the way, your email subject line is automatically added as the title of your web version page, so you don’t have to change this manually.

Here is the comparison of the web version of your email. Looks way better right?

How about Use Case #3?

Standalone Real Time Marketing Forms

Unfortunately, we cannot change the favicon of the standalone Real Time Marketing Forms. As we take a look at the HTML of these standalone pages (right mouse click > ‘View page source’) , you can see that the script is embedded on this URL and not the actual HTML.

Therefore, the favicon is not placed on this page, and we cannot use this technique here ☹

Wrap up

By adding four lines of code to your Preference Center and your Real Time Marketing Email, you build more trust. A small image making a big impact. You’re my favorite, favicon!