Understanding Logos
How do you make an organisation visually recognisable? Simple. Have a great logo! Logos act as a shortcut, enabling anyone to recognise an organisation across different mediums, whilst communicating their story with a single snapshot. They also act as a kind of verification and authentic stamp, so the viewer trusts that what they see is from you. This is what makes logos something worth setting up right. Let’s explore this in Raisely.
Skip Ahead To
Logo Design
Clarity and simplicity are key to designing great logos. Other areas of your brand and design can communicate more, but your logo is just a snapshot. You can have a
symbol logo (Nike) or
wordmark logo (Coke), or a mix of both (Domino’s). In brand style guides you may well find logo variations, where different use-cases determine if just a symbol, wordmark, or both are appropriate. This gives your logo some flexibility based on where and how it is used.
Colours, Formats, & Sizing
You only need one logo file right? Well, not quite. Most brand style guides will look to give your logo as much flexibility as possible depending on where you place it. Therefore, most logo’s are saved in various colours and formats.
COLOURS
When preparing your logo files, it is good practise to have 3 variations of your logo –
light (often white),
dark (often black),
coloured (often the primary brand colour). This way your logo can exist on different backgrounds and adapt well. One critical factor is to have logo’s saved with a
transparent background, allowing it to adapt to various background colours and images.
FORMATS
The recommended file formats for logos on websites are PNG (transparent) and SVG (vector). Unlike JPEG (.jpg) files, PNG (.png) files allow you to save the image with a transparent background. SVG (.svg) files are a vector file, allowing you to resize the image to whatever size you like without pixelating the image.
SIZING
Sizing your logo correctly will make sure it remains clear to the viewer but also responsive, depending on where it’s placed and what device it is viewed on. Here are some tips to sizing your logo correctly:
- Crop out any unnecessary space around your logo (unless SVG where it will do this automatically)
- Scale and save your logo at 560 pixels (width or height). Not required with SVG
Looking to have multiple logos side by side? This is best done through resizing all the logos to have the same canvas size. You can use great tools like Adobe Spark Resizer to help you with this.
Header, Footer & Mobile Responsiveness
In most cases, your logo will appear in two places on your website: Header & Footer (top and bottom of the page). To insert your logo, follow these simple steps:
Single Logo
- 1
- From your campaign sidebar, select Design > Brand > Logo
- 2
- Simply remove the default logo using the Trash icon, the drag in or select a new file
- 3
- From the campaign sidebar, select Pages > Header & Footer
- 4
- There are 3 BLOCKS you can use to display your logo: Header, Campaign Logo, or Image. Except for Image , these blocks will automatically insert the logo you placed in your design settings. Place your logo where you need in both the header and footer. For the Header block, you have the option of an alternative logo. This is helpful if the footer needs a different coloured logo than your header.
### accordion
## expand
# Advanced: Multiple logos side-by-side
- 1
- From the campaign sidebar, select Pages > Header & Footer
- 2
- Add a new BLOCK - Image, and place BLOCK where you like
- 3
- Drag or Select to upload new image, and select your image size in the settings
- 4
- In Image settings, select the Advanced tab > Attributes. Type in logo-inline and Save
- 5
- Click the CSS Icon (paintbrush) to access your stylesheet. Scroll down to the bottom and insert this line of code:
- 6
- Save your changes. This line of code tells your image to sit on the same line as others with the same attribute but be spaced 10px apart on the left and right.
- 7
- Now simply Duplicate this image block to insert your next logo side by side.
.logo-inline {display:inline-block;padding:0px 10px;}
Note: You will not see the changes live within the page builder. To view changes, simply view your LIVE SITE. We recommend always having your LIVE SITE open in an Incognito window during page editing.
## expand
### accordion
RESPONSIVE DESIGN
In most cases, your logos will need to be resized to suit mobile devices. There are two ways you can do this:
Duplicate Logos
- 1
- Create a new Image or Logo block for both desktop view and mobile view.
- 2
- In the blocks settings, adjust the logo or image width
- 3
- Select the Advanced tab and adjust the switch Show on Desktop for the relevant block.
### accordion
## expand
# Advanced: Custom CSS
You can also add some custom CSS into your site to adjust the image width for mobile only. Simply:
- 1
- Within the block settings, select the Advanced tab > Attributes. There enter mob-logo-width
- 2
- Click the CSS Icon (paintbrush) to access your stylesheet. Scroll down to the bottom and insert this line of code:
- 3
-
@media (max-width: 736px) { .mob-logo-width {
width:70%;
} - 4
- This line is a mobile responsive command, telling the logo element to down-size to 70% when the screen resolution is small for mobile (under 768px).
## expand
### accordion
Favicons
Favicons are the little icon that sit on the left in your browsers navigation bar or on the window tab. These little icons can often be overlooked, but are important in bring your site together. Typically, favicons are always 32px x 32px PNG files. To setup your favicon:
- 1
- Resize you logo to 32px x 32px and save as PNG
- 2
- From your campaign sidebar, select Design > Brand >Favicon. Simply drag or select your saved logo file to upload.
- 3
- Save changes
FAQ’s
### accordion
## expand
# How do I size my logo for tablet as well as mobile?
As referenced in the steps above, you will need to duplicate the line of code and change the ‘media query’ to
@media (max-width: 1024px) This makes the ‘breakpoint’ (the screen resolution limit) suitable for tablet devices.
## expand
## expand
# My logos are not sizing up correctly next to each other. What do I do?
The easiest way to fix this is to make sure each logo image file is the same size, in both pixel height and width. This is not referring to the size of the logo but the canvas size of the image. A simple method using Photoshop or Canva is to create a new document at the set size you want, and copy each logo onto that canvas, resizing each to make sure they match. Export them separately, then upload them to your site. This is often easier than resizing logos within the page builder or adjusting CSS.
## expand
### accordion
Cannot find the support guide you are after? Head on over to our YouTube channel 📺 for more creative content to help you go further. You can even leave us comments, suggesting new content ideas 🤯