💡Summary: For your website, we recommend always using the simplest, most minimal version of your logo (Wordmark or Symbol only). Use a high-resolution (800px) transparent .PNG or a vector .SVG (size does not matter).
Logo Layouts
In the design industry, there are normally 3 main layouts of logos:
1. Wordmark
This is when your logo consists of just text - this could be your name or business name and it may be stylized.
2. Symbol or Brandmark
This is when your logo is just a symbol or icon - This is most commonly used on your website and/or as the favicon that is shown in the browser tab when are viewing your website.
3. Combination Mark
This is when your logo includes both the Wordmark and the Symbol
4. Logo Lockup
This type of logo includes the Wordmark (text), Symbol, Tagline, and/or other design elements - This is not commonly for use on websites.
💡 Check out these live examples of great logo formats!
Logo Best Practices
You may have been given a logo by a graphic designer or generated a logo using a generator or AI tool that produced one of these layouts.
For Websites
The recommended layout of your logo for use on a website is either:
1. Wordmark
2. Symbol
The reason has to do with legibility and Web accessibility standards -You don't want your logo to feature things like taglines, phone numbers or descriptions, as that will be hard to read at small sizes and responsively on different devices.
Instead you want to keep it simple! Your combination marks and logo lockups are great for things like print design, business cards, flyers, t-shirts etc but you DO NOT want to use logos with many small elements and text for your website.
We recommend that if you have a complex logo lockup that you separate out the main elements (Wordmark, Symbol and Tagline) that way you can upload a logo that looks something like these:
You can do this by requesting that layout from your graphic designer, regenerating your logo or adjusting the source file yourself using a design tool like Canva.
Recommended Logo File Types
There are 3 common logo files types that are accepted by websites
1. SVG - Scalable Vector Graphics (Recommended)
SVGs are scalable, meaning they can be resized without any loss of quality, making them perfect for responsive web design where the logo needs to adjust to different screen sizes. SVGs also support transparency and can include animation or interactive elements, offering more flexibility than PNG or JPG.
Recommended resolution: Does not matter, because it is scalable
2. PNG - Transparent (Recommended)
This is commonly used because it does not have a background color. It's best because it appear most cohesive and blends in seamlessly with the background of your website.
Recommended resolution: Around 800px (height or width depending on whether your logo is landscape or square orientation)
3. JPG - Not transparent (Not recommended)
This is a common file type but it is not recommended because it will have a background color that will show up over your website.