web design

Optimize your logo for a website

Having a logo is a very good thing for a company. However a logo that has been designed for print, that is to say for printing will not be made for the web. Indeed there are certain rules of web design to respect.

Anne-Laure CompainAnne-Laure Compain

Anne-Laure Compain

Graphic designer at Snoweb
Published on 14 March 2021 (Updated on 2 April 2022)

Creating a logo is an important step in the life of a company. But, many entrepreneurs or business leaders, do not find the budget to create it with competent providers. They will therefore turn to the creation "home-made" or use logo generators. By the way, if you want to know the price of a logo, read our article.

In this article, we will talk a little technical, to present you some tips to know about logos and their use in the web.

1. Colors in the web

RGB color "Red, Green, Blue": this colorimetric mode is used for screens, be it computers, smartphones or television or camera. To make it simple, the screens of computers or phones must be lit so that we see what is displayed.

Small explanation: each pixel of a screen is composed of three points of light, red, green and blue. To obtain different colors, we vary the intensity of these light points, from 0 to 255. If the three colors red, green and blue are at 0, we get a black screen: zero brightness. On the other hand, if the three colors are 255, we get white: maximum brightness.

Here are some examples of colors

1. Pure red color #FF0000


2. Sky Blue #0080FF


3. Yellow #FFE600


Finally, the RGB mode provides much more luminous colors than the CMYK mode used in printing.

In conclusion, for your logo, use an RGB mode to export it for the web and a CMYK mode for printing. But not to have too much difference between your two logos, avoid colors too fluent, which will become dull in printing and will not have the desired impact.

Here is an example in image of the same colors in RGB and CMYK:

RGB website logo

2. Formats on the web

2.1 JPG or JPEG

  • The JPG format is a classic export format for an image.
  • It is a disruptive format because if you reduce the weight of a JPG image you also reduce its quality.

2.2 PNG

  • The main advantage of PNG is that it takes into account the transparency of a layer unlike a JPG. This is interesting to export a logo without background color.
  • Contrary to the JPG format, it is a non-destructive image format because this format allows to reduce the weight of an image without impacting its quality.

The PNG format has several export modes:

  • PNG 24 : it is a recording with + 16 million colors. It's a high quality export to have an unrestructured image.
  • PNG 8: this is a recording with different palettes: either 256, 128, 64, 32 or 16. The smaller the palette, the less colors there will be in the image. The image is therefore less heavy but also of poor quality.

2.3 WebP

This image format was developed by Google. It provides the same file as a JPG image, but with a smaller file size.

By reducing the size of your image files with this format, it helps to provide a better experience for website visitors because the website pages will load faster.

In Google's WebP compression study, we see that a WebP image is

  • 25-35% smaller than a comparable JPEG image.
  • 26% smaller than a comparable PNG image.

The WebP format is supported by most browsers like Chrome or Firefox. However the WebP format is not compatible with the Apple browser, Safari. Indeed, we will find "broken" images with a white background on a PNG for example. Even if the users of Safari are less important, you should not neglect them and find an alternative.

Another problem with the WebP format, the Wordpress CMS does not allow to add a WebP image in its library, a nice error message will be displayed instead. To use WebP on Wordpress you must download a WebP Express plugin.

2.4 SVG (Scalable Vector Graphics)

Benefits :

  • Ultra light weight.
  • Easily editable from any text editor with CSS or with a graphic design software like Illustrator or Sketch.
  • No change in image quality: ideal format for HD and ultra HD screens regardless of the final image size.
  • Compatible with all browsers.
  • Infinite animation possible with CSS or JS

Disadvantages :

  • the size of an SVG file grows very fast if its content contains a lot of graphic elements or a lot of layers.
  • A CMS like Wordpress does not allow to import SVG files. For the most daring, you will have to touch the code and add a few lines in order to add SVGs. For the others, you will have to be satisfied with a JPG, JPEG or PNG format for your images

To optimize your logo, use the SVG format for its export. It will only be a few bytes and will not affect the loading speed of your site.

Good to know: There is now the SVGZ format which is the compressed format of an SVG. This format allows you to reduce the weight of an SVG by 30% without any loss of quality. The disadvantage is that you no longer have access to the modification via the CSS, you will have to use a software like Illustrator to modify it.

3. The export

When you create your logo, think of working more horizontal than vertical. Indeed a logo higher than wide or square will not fit properly in the header (menu) of your website.

Here is an example in image for the Snoweb logo, with a more horizontal logo, the header is less high and therefore takes less space on the page, leaving room for the important information of the site.

Some sizes for exports

For a horizontal format :

  • 250 px x 100 px
  • 350 px x 75 px
  • 400 px x 100 px

Favicon :

  • 16 px x 16 px
  • 32 px x 32 px
  • 48 px x 48 px
I need help in web design for theredesign of my website