Skip to main content

Saving your logo and brand assets for Reward Manager

Tommy Yang
  • Updated

Introduction

In part 1 of this two-part Guide we learned what are the best and well-established practices when you are creating your Programme Logo as well as some of the technical basics. Now let’s take a look at the technical side of things like dimensions, file sizes and file format.

All Reward Gateway Edenred clients must have their Programme and Company Logos correctly prepared for upload to RG Administration Portal. The logos must be provided in two file formats - PNG (Portable Network Graphics) and SVG (Scalable Vector Graphics). Why the two formats? The short answer is: for compatibility. The long answer: SVG format is much superior to PNG format as it provides sharp edges and looks way better. We still use PNG as a fallback because some older browsers don’t support SVG format, and we also use PNG to display Programme Logo / Company Logo in the system-generated emails. That’s why it is important to properly set your files and achieve the best possible look for your employees.

2024-09-03_16-06-38.png

Step-by-Step Guide

This tutorial assumes that you have basic knowledge of Adobe Illustrator CC 2019. It also only covers the mentioned Illustrator - we cannot guide for other commercial or free software. Note that screenshots are made on a Mac computer, but the same Menus and commands apply to Windows-based computers.

It also assumes that your logo is made entirely of vector graphics - meaning that no photographic images have been used for your Programme or Company logo. For more information about what is Vector and what is Raster, click here to learn more.

You have created your own Programme Logo - congratulations!!! Let’s see how to prepare your files for the correct display on your Platform and enforce your company brand!
In Adobe Illustrator CC 2019 (or 2020, whichever you have) make sure your Artboard is set to 1050 by 300 px dimensions.

  1. Choose Artboard tool in Tools Bar Artboard_Tool.png
  2. Make sure you have Properties Panel visible (Window Menu > Properties)
    Artboard_Properties.png
  3. Select your artboard. In the Properties Panel set the dimensions of your Artboard to 1050 px by 300 px
    Width_Height.png

Saving your logo as PNG

Now you need to resize your artwork to fit one of the dimensions (in our case we set the width to 1050px - but make sure you have locked the aspect ratio by clicking the Lock_Aspect.pngicon. Select your artwork and enter the dimensions.

Resized_Logo.png

Do not worry that the logo fills the space to the edges of the artboard - when uploaded it will sit on a white background so it’s not necessary to leave any margin in your output files.

Make sure your logo is vertically centered. Now you are ready to save your logo as PNG.

  1. Choose File > Export > Save for Web (Legacy)...
    Save_For_Web.png
  2. The following dialogue window should look like this
    Web_Settings.png
  3. File format must be PNG-24. Be sure to check Transparency and Clip to Artboard checkboxes
  4. Click Save. Give your file a name and you’re done!

Save your logo as SVG

Now let’s prepare your artwork to be saved as SVG file

  1. With the current layout, make sure your artwork is grouped. Choose Select > All and then Object > Group
  2. Now choose from the menu Object >  Artboard > Fit to Artwork Bounds
    Fit_To_Artwork_Bounds.png
  3. Now the artboard size matches the size of your artwork - great job! 

Now let’s save the artwork as SVG.

    1. Select File > Save as > and choose format: SVG from the dropdown 
    2. On the following dialog window select the below settings

Adobe_Illustrator_Settings.png

Hit OK and you’re done! Now let’s see what other brand elements you can prepare for your platform.

Saving Home Screen Icon and Favicon assets

Now when you’re done with the logo export, you will also need to properly save two more assets - Home Screen Icon and Favicon. 

Home Screen Icon

The home screen icon is a shortcut to your programme URL which employees can bookmark on their Apple iPhones home screen - like in the example:

Homescreen_Sample.png

If your Programme Logo features some sort of an icon or symbol it is a great idea to use it as a Home Screen icon.

When your Programme Logo is just type and is very long, like for example Reward Gateway it’s not advisable to scale it down to fit on the icon - you better just use the first letter of the Platform Name or a monogram of first two letters - in our case RG.

Save your home screen icon with the following parameters: 

  1. Make your Adobe Illustrator artboard 192x192 px
  2. Position your artwork so it is centered horizontally and vertically
  3. Make sure there are at least 20px margins from the edge, so the iOS can add the rounded corners (like in the screen below
    Screenshot_2020-03-05_at_11.36.46.png
  4. Now go to File > Export > Save for Web (Legacy) and save with the below settings. Make sure Clip to Artboard is checked and Transparency is unchecked
    2024-09-03_16-17-59.png
  5. Click Save. Give your homescreen icon a name (for example “my Home Screen Icon.png”) and you’re done!

Favicon

A favicon, also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons, associated with a particular website or web page.

Favicon_example.png

Favicon follows the same rules as Home Screen Icon, only more strict - because in reality, the favicon is only 16x16 pixels in size - as you can see lots of detail gets lost when scaled down so drastically.

Save your favicon with the following parameters: 

  1. Make your Adobe Illustrator artboard 64x64 px
  2. Position your artwork so it is centered horizontally and vertically
  3. Now go to File > Export > Save for Web (Legacy) and save with the settings below. Make sure Transparency is checked as well as Clip to Artboard
    Favicon_Save_For_Web.png
  4. Click Save
  5. Give your favicon a name (for example “My Favicon.png” and you’re done!

Now pack everything in a ZIP format and send it to your Implementation Manager so they can upload the assets to RG Administration Portal.

Alternatively, you can upload it yourself (see this article). This can be really useful if you want to upload a seasonal (temporary) version of your Programme Logo, for example, a Christmas one.

Programme Logo Assets Template

For your convenience, we have prepared an Adobe Illustrator Template with the exact dimensions and artboard settings so you can simply drop your artwork into corresponding artboards, resize and save as instructed. System requirements: minimum Adobe Illustrator CS6.

Download the Adobe Illustrator template - click here.

Important note

Now that you have completed the task of saving the Programme Logo assets, please take your time to send us the original vector artwork of your Programme Logo. These go to our library where we keep everything design-related from the client - and this logo will be then used on all your comms. That’s why we need it in the maximum possible quality.

  1. Logos must be supplied in AI (Adobe Illustrator) or EPS (Encapsulated Postscript) file formats and with vector shapes.
  2. Bitmap (raster) image formats like Adobe Photoshop have little to no use
  3. Bitmap (raster) images saved as EPS or AI are no good
  4. JPEG/PNG files are not acceptable either
  5. Fonts used in the artwork must be converted to outlines (converted to curves)

The output files sent to us must not contain "linked objects" - because they are not physically included in the file sent and still reside on a person's hard drive. These linked objects could be either externally placed images or links from so-called CC Libraries. These libraries are personal and their content is invisible to third parties like us, the Design Team.

Related articles