Make Your Logo Work for You
Your logo is the graphic face of your brand. It’s the single piece of design that announces your company’s presence, whether on a pen, a brochure or a website. When considering the different types of product that might display your logo, it would be a reasonable assumption that your logo dimensions would vary from application to application. Your logo printed on a pen would of course need to be smaller than your logo printed on a brochure.
However, these dimension differences don’t only occur on different types of products. Due to the increasing availability of a wide variety of devices that have the capability to access the internet, the size of the screen any given website is viewed on can differ greatly. This means different types of websites will display your logo in different sizes. If your own website is viewed on a laptop, the bigger screen allows for a more involved layout. But if your same website is viewed on a mobile device, chances are the layout will be more streamlined and offer fewer options for activity. Therefore, your logo needs to be able to adapt to the optimum size for multiple different websites that will be viewed on multiple different devices.
Read on for the best practices when it comes to logo dimensions that perform well on multiple types of websites, as well as good practices for designing a logo in general.
Create Your Logo as a Vector Graphic
The absolute best practice in logo dimensions is to have a logo that is saved in a vector format. A vector is a dynamic type of file that lends a great deal of flexibility to your logo. Rather than saving an image as a collection of lines and colors, a vector turns that information into a mathematical formula.
The advantage here is that the formula can be easily manipulated into changing size, color and several other factors without losing any of the image’s quality. Should you need to tweak a bit of your design, it can be quickly accomplished by altering the formula rather than starting over from scratch with a new file. It also gives your logo file immense stability, allowing it to be printed on a variety of materials and from a variety of different printers without the color or composition changing.
The other way many graphics and photo files are saved is as raster files. This kind of file saves the images as a series of squares, or pixels. It’s a desirable method for pictures that will never need to be scaled up. It’s also a good file type for putting pictures online because it can make for a relatively small file given the content, which means it won’t take a long time to load on a browser page.
A vector file must be created with vector graphic editing software, such as Inkscape or Adobe Illustrator. Inkscape is a free, open-source program that can run on Windows, Linux and Mac OS X, so if you don’t already have vector graphic editing software, you won’t have to make a large investment to get started creating your logo as a vector file.
Create Different Versions of Your Logo
As a logo is scaled down to smaller and smaller sizes, much of the detail within the design will be lost. If your logo is anything more than a simple shape, you may consider developing alternate versions of it with less detail so that when it needs to appear smaller, such as on a website favicon, it will still be distinguishable as your logo. For example, if your logo is a shape with text, consider omitting the text and letting the shape alone represent the logo in these smaller spaces.
To see this in action, the Spotify logo includes a three arced lines within a circle next to the word “Spotify.” However, you will sometimes see just the circle inscribed with arced lines, particularly when placed in a location where space is at a minimum. Many other companies, such as Facebook, Starbucks and Twitter have transitioned to a standard, simple logo that will read well at any size. This has generally involved removing any lettering from the logo and removing much of the detail within it.
Create Different Lockups of Your Logo
Similar to the need to have versions of your logo that have varying amounts of detail, it is wise to also have versions of your logo that will fit into different orientations. The layout of your logo is referred to as its lockup. If you already have these different design lockups created, you’ll be ready to put your mark on whatever canvas comes your way. This doesn’t mean creating entirely new logos to fit into different layouts. The graphic and the text remain the same, but what changes is their position in relation to one another. A horizontal orientation would have a graphic next to text, while a vertical orientation would have the graphic above or below the text. You might put the horizontal orientation on a business card, while a vertical stacking of the graph and text will read better on a coffee mug.
Create Your Logo in Different Colors
Your logo may appear on any number of backgrounds, so you’ll want to make sure it will be visible in every situation. Have versions of your logo created that will stand out well on both light and dark colors. When you want to put your logo on a website that has a dark background, you can put the lighter-colored logo on it. Similarly, you’ll have a darker logo to put on a light-colored background. If your logo has color in it, you’ll want a black and white version created for publications that won’t be printed in color. You don’t want to assume that your color logo will translate well into grayscale.
For example, the Twitter logo may be seen as little blue bird standing alone, or it may be seen as a little white bird within a blue square. These variations keep the logo’s trademark color but present it in a way that is visible anywhere the logo needs to be placed. Many companies are changing their logos to be simple, one-color designs for this reason. Spotify used to have a green circle with black lettering, but now the logo is all the same color of bright green. If it should ever need to appear in black and white, it will be a simple change from green to black.
While we’re on the subject of color, you should consider the way your logo is colored, especially if you ever plan on having it printed. The general standard for four-color printing is CMYK. These letters stand for cyan, magenta, yellow and black. When a color is printed with this method, four different colors of ink are layered together to create your prescribed color. This nature of this method allows for slight variances from printing to printing. However, another system of color coding is the Pantone method. In this system, every color has its own ink, so no matter where or when something is printed, the color will match exactly.
A Quick Guide to Logo Sizes
Use this list to guide you while you’re creating your logo design variations. Consider which websites you may want to use your logo on and make sure your logo is legible and distinguishable at each and every size.
Note that these measurements are in pixels, not millimeters or inches. For logos intended to be printed, you want to look at dpi instead.
Website Logo Sizes
- Square or Vertical Website Blocks: 160 pixels x 160 pixels
- Horizontal Website Blocks: 250 pixels x 150 pixels, 350 pixels x 75 pixels, 400 pixels x 100 pixels
- Favicons: 16 pixels x 16 pixels, 32 pixels x 32 pixels, 48 pixels x 48 pixels
Social Media Icon Sizes
- Pinterest: 165 pixels x 165 pixels
- Instagram: 110 pixels x 110 pixels
- Twitter: 400 pixels x 400 pixels
- Facebook: 200 pixels x 200 pixels
- YouTube Channel: 98 pixels x 98 pixels
- Google+: 250 pixels x 250 pixels
- LinkedIn: 300 pixels x 300 pixels
Mobile App Icon Sizes
- Windows: 62 pixels x 62 pixels
- Android: 192 pixels x 192 pixels
- iPhone 6S, 6+, 7+: 180 pixels x 180 pixels
- iPad: 152 pixels x 152 pixels
The absolute best practice for making sure your logo is properly sized for different websites is to have it created in a vector format. The vector file type allows for a large amount of flexibility in working with your logo, letting you easily adjust the fit for any type of website, as well as any other application, without losing the slightest amount of image quality. You also want to make different versions of your logo that can be scaled down easily, different orientations of your logo that allow for optimum readability on different applications, and different colors of your logo ready for use. All of these tasks are easy to accomplish when your logo is a vector file.
