Natalie Ustymenko

Head of Direct Marketing

How to Create an SVG Logo for BIMI

How to Create an SVG Logo for BIMI

The Brand Indicators for Message Identification (BIMI) is a relatively new and rapidly evolving standard that allows brands to display their logos in customers' Inboxes. Why is it gaining hype? BIMI complements digital signatures such as SPF, DKIM, and DMARC, but there are several conditions to consider if you want to use BIMI.

Important!

To display the BIMI logo in Gmail, you need to:

1. Set up digital signatures.

2. Register the logo as a trademark.

3. Create the BIMI logo in SVG format and add it to the MX record.

4. Get certified by DigiCert or Entrust to confirm that the logo belongs to your organization.

More details>>

Logo display example

Here we’ll consider exclusively the third point: how to create the BIMI logo in SVG format.

Creating Brand Logo SVG File

Logo requirements look like this:

  • The logo must be square with a 1:1 ratio. Since the logo in the mailbox can be placed in circles, squares, etc., the image should be centered.

  • The logo must be in SVG 1.2 Tiny format.

  • The file size must not exceed 32 KB.

  • The logo must not contain text.

Creating an SVG file in Adobe Illustrator

  1. If the logo is created from an image, then you can select an element and click Image Trace in the Object tab to convert it to vector graphics. You can also use a logo generator to generate a vector logo for you. 

Converting the logo

If the quality of the image has suffered, then first undo the action (Edit tab → Undo Scale).

Undoing Scale

Next, in the Window tab, select the Image Trace item.

Image Trace in the menu

Here you will find settings to improve the quality of a vector element.

Image Trace

  1. If the logo contains text, then it must be removed, as it isn’t supported by BIMI. Select the text layer and in the Type menu click Create Outlines. The text is now displayed as "Group".

Text editing

  1. Select all the objects and then go to Object → Ungroup. You should repeat this step until all items are ungrouped.

Ungrouping items

Last post

Exporting the SVG file

  1. To conform to the BIMI specification, the logo must be square. Create a new 1:1 file in the current file with RGB color mode.

Image 1:1 creation

  1. Copy all the elements of the original file and paste them into the new one.

  2. Then click Save As..., and select the SVG format in the Save as type:.

Selecting SVG type

  1. Select SVG Tiny 1.2 in the SVG Profiles from the drop-down list.

SVG Tiny 1.2

Converting the file to SVG P/S

Check out converting SVG Tiny 1.2 file to SVG P/S format in source code. You can use the following tools:

The first two tools automatically convert files, while the rest is for manual editing.

If you created a file from scratch, then the easiest way to edit code is right there, in Adobe Illustrator, by clicking on the SVG Code button.

If you have only a ready-made SVG file, then it will be easier to install and use one of the other services. Let's consider an example to make the roadmap clear.

Converting a file in the Sublime Text editor

By clicking on the SVG file, it will open in Sublime Text. In the XML code, you need to:

  • Remove x/y attributes: clean out x=“0px” and y=“0px” in the code.

  • Change baseProfile=“tiny” to baseProfile=“tiny-ps” in line 3.

  • Remove all style tags and attributes.

  • The version attribute has a value “1.2”.

Editing code in Sublime Text

  • Add the line title. This can be your company name, with a maximum of 64 characters. For example, tag title Yourcompany /title.

Also, note that in the logo XML file

  • there should be no external links,

  • no animation or other interactive elements.

The result should be the following XML:

Final code

Placing the Logo in DNS

Now you can proceed to the final step: place the picture on your hosting. Go to the admin panel where you registered the domain, set up digital signatures, and add in the Value field:

  • v – protocol version,

  • l – path to your logo in SVG format.

Placing the logo in DNS

Note that the DMARC policy must contain a rule with the value p=quarantine or p=reject to display the BIMI logo.

Send campaigns according to all the rules

How to Identify and Fix Errors

1. If you have already added the logo

You can check the correctness of displaying the logo on domain-checker.valimail.com or bimigroup.org/bimi-generator.

To do this, enter your domain name in the search bar. Here you can check:

  • digital signature settings,

  • BIMI logo,

  • displaying the logo in light and dark mode,

  • availability of Verified Mark Certificate (VMC).

Checking the settings

2. If you are just planning to add a BIMI logo

You can pre-generate BIMI on bimigroup.org/bimi-generator/:

  1. Click on the Generate BIMI button.

  2. In the block that opens, specify the domain name.

  3. Download the generated SVG file.

  4. Click on the Generate BIMI Record button.

BIMI generator

If there are errors in the BIMI record, you’ll see the full list and hints on how to fix them.

Highlighting errors

If there are no errors and everything is done correctly, the following notification will be displayed: “BIMI record generated successfully!!!✔️”

Success notification

3. If nothing helped

If you are sure that everything is configured correctly and your certificate is accepted, but the logo is still not displayed, contact Verizon Media support.

Verizon Media support

Ready! Now your subscribers will see your logo in their Inboxes in AOL, Verizon, Yahoo, and Gmail.

5.0 from 5 based on 1 reviews

Natalie Ustymenko

Head of Direct Marketing

Comments 1

aariya goel 2 years ago

Nice !! Thanks for share nice stuff

Similar Articles

Gmail Annotations

12 February 2021

How to Annotate Your Emails with Gmail Promotions Annotations

Natalie Ustymenko

How to Add Actions to Gmail Inbox

28 August 2021

How to Add Actions to Gmail Inbox

Mykhailo Frolov