The following are a few tips to help people get Outlook to display logos in email notifications correctly.
Problems
Here are a few problem I ran into when using Eramba and Outlook both in their default configurations.
- Outlook will not automatically download images by default as a privacy measure.
- Outlook cannot render SVG images, but it also can’t communicate this to the end-user.
- Outlook does not handle embedded CSS styles very well.
Solutions
- Convert the standard Eramba logo from an SVG to a PNG. I used Inkscape, and exported the image using a resolution of 360x60. This is large enough to appear crisp even on 4k screens.
- Outlook will automatically download images if the URL is listed in Internet Explorer’s “Trusted Sites” zone. Open the Windows “Internet Options” window to find this.
- Eramba’s HTML email template applies CSS stylings to the logo, but Outlook does not use them correctly. As a result, the logo will not scale correctly. To fix this, you need to make a small edit to Eramba’s template. See below.
To edit the email template for step 3 above, modify “templates/layout/email/html/default.php”. Find the HTML tag describing the logo, and modify it as follows:
old:
<img src="<?= $this->Logo->url() ?>" alt="Eramba" style="max-width: 180px; line-height: 100%; outline: none; border: 0; text-decoration: none; height: auto;">
new:
<img src="<?= $this->Logo->url() ?>" alt="Eramba" width="180" height="30" style="line-height: 100%; outline: none; border: 0; text-decoration: none;">
