Create a BIMI logo that meets all requirements
The BIMI logo must meet a number of requirements before it can be displayed in the inbox. If the logo does not meet those requirements, it may not be shown. Read on and find out what the BIMI requirements are and how to create a valid SVG file.
Please note, the BIMI Working Group is the authority on defining the specifications. The requirements and ‘how-to’ below may be subject to updates/change.
BIMI Logo requirements
- Make sure the logo is vector-based. Files with the extension: PDF, Ai SVG or EPS are often vector-based files. If in doubt, please contact the designer.
- Format: SVG Tiny 1.2
- Logo dimensions: square
- The BIMI logo must be published on a domain with an SSL Certificate in place (https)
How to create a validated BIMI SVG file
Go through the steps below and create a SVG file which can be used for the BIMI record.
- Open the vector-based file in Adobe Illustrator
- Save the file as (file > Save as…)
Choose SVG (not: svgz) | Avoid uppercase letters, spaces, underscores, or strange characters in the file name. Keep it simple. For example: brand-name-bimi.svg
- Save the file with the following settings
Settings: SVG Profiles: SVG Tiny 1.2 | Image location: Preserve
- Open the just created SVG file in a code/text editor
If no code editor is available, open the standard available software. For example: TextEdit (Mac) or Notepad (Windows)
- On line 3: Change the base Profile from “tiny” to “tiny-ps”
- On line 3: Remove the x/y attributes
If the SVG tag (<svg…) contains the x/y attributes (for example: x=”0” y=”0”), remove these attributes.
- Add a title on line 4
After the <svg… and before the <g> tag) add <title></title>. Example: <title>Brand name</title> More than 65 characters are not allowed
- Save the modified (SVG) file
If the customized SVG file looks similar to this example. The file is ready.
- Upload the SVG file to the server for which the BIMI record is also published
Troubleshooting the BIMI SVG file
Find out if the BIMI logo contains bitmap images
To find out if a bitmap image has been added, check the SVG file. There are several ways to check the source code of an SVG file. Two are mentioned below:
- Save/download the SVG File (option 1)
- Open the SVG file in TextEdit (Mac) or Notepad (Windows)
- Open the SVG file in Google Chrome (option 2)
- View the source code (view > developer > source code)
- After the source code is visible, search for: img/
If the search returns a result it can be assumed that the SVG file contains a bitmap image and therefore does not match the guidelines of the BIMI logo.
Example:
When the next line (file.Xlink:href=”data:img/png;base64, i) is found, the SVG file contains a reference to a PNG (Bitmap).
Solution
Ask the designer of the logo to modify the file so that it is a fully vector-based file.
Large SVG files without bitmap images
It is possible that the SVG file was created in a different way and therefore contains more (unnecessary) code.
Solution
In that case open the SVG file in Adobe Illustrator and follow the steps mentioned above. This will create a well encoded SVG file.
Additional resources
- The full BIMI SVG specification
- More information about creating SVG files with Adobe Illustrator
