Extravision

Extravision Blogsblog

Recent Posts

Categories

Posts

How to add a favicon on your email’s online version?

July 15, 2014

Branding is an important element you need to consider when creating your emails, so why not follow through to the online version? It’s the little details that make a big difference. Adding a favicon to the online version will keep your branding consistent throughout. You can now generate online versions of your emails automatically in Messenger. (For more information on creating automatic online versions in Messenger, check out the post written by Tom Chiverton)
 
For those who don’t know, a favicon (short for favourite icon) is a small 16x16 icon, usually located at the left of a browser tab and in bookmarking areas. Most favicons are designed to show a small rendition of their logo so it is still recognisable to the user. The main purpose of a favicon is to provide an easier experience for the user; allowing them to find a particular webpage quickly.

Adding a favicon to the online version is easy. If you are using the new version of Messenger, all you need to do is follow these simple steps:
 
Step 1: How to create a favicon?
Firstly you will need to create an image with the dimensions of 16x16 pixels saved out as any of the following JPG, JPEG, PNG, GIF, BMP, TIF, and TIFF.
 
The link below will allow you to convert your existing image into an ICO file. Just follow the steps given on the website.
  
Step 2: Where to save favicon?
Upload this file using messenger:
Select a campaign>> Click on ‘Files’ tab>> Click on the ‘Image’ folder>> Click on the button ‘Upload files’>> Add the file then start the upload.
 
Once the file has been uploaded, click on the image and copy the URL link. You will need to insert this URL link in the code shown in step 3.
  
Step 3: Where and what to code?
Find the html source of your email and add the following code within the head tag:
<link rel="icon" type="image/x-icon" href="insert image URL link here" />
 
So the code will look similar to this:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Blog – Favicon tutorial</title>
<link rel="icon" type="image/x-icon" href="http://files.evmailer.com/extravision/images/favicon.ico" />
</head>
 
Once you have completed these steps, send yourself a new test email and you will be able to see the favicon on the online version of your email.
  
Sources:
What’s the point of favicons? – Ray Vellest
Automatic online versions of your email just got easier - Tom Chiverton

Posted by Carissa Lo
Email Design


No comments

Comments are closed.

From the Blog

Data Protection, E-Privacy, GDPR. What does it all mean ?

Most people have heard of the Data Protection Act and if your in email marketing…

Simon Hill
December 5, 2016

5 things you should stop doing right now in your email marketing

It’s easy to get stuck in a rut with your email marketing campaigns. You can…

Jenni Malley
October 26, 2016

Latest Tweets

Facebook IconTwitter IconVisit Our BlogVisit Our BlogVisit Our Blog