The logo is one of the first things you see on a website, and one of the easiest to distort: a blurry image on a high-resolution screen, a logo too big on mobile, a white box visible on a coloured page. A few simple settings are enough to avoid that.
The right format
- SVG: a vector format that stays sharp at every size and on every screen, and weighs very little. It is the one to favour.
- Transparent PNG: a good fallback. For high-resolution screens, provide a version at twice the display size.
- JPG: to avoid, as it has no transparent background and degrades the edges.
The formats to ask for at delivery are detailed in which file formats to request for a logo and in a logo's file formats, explained simply (in French).
Size and placement
The logo is most often placed at the top left of the header, linking to the home page. Its height should stay reasonable so it doesn't crush the menu, and the clear space around it should be respected. On mobile, a reduced or simplified version is often better: see responsive logo: adapting to every screen (in French).
Light and dark backgrounds
If your site offers a dark theme, or if the logo sits on an image, plan an adapted version (a light logo on a dark background). A black logo on a dark background disappears.
The favicon
The favicon is the small icon shown in the browser tab and in bookmarks. It is built from a simplified version of the logo, often the symbol alone. See the favicon: why you shouldn't neglect it (in French).
Accessibility and search
- Alt text (the alt attribute) that repeats the business name, without repeating the word "logo".
- A light file weight, so it doesn't slow down display.
- A link to the home page, the behaviour visitors expect from a clickable logo.
The logo and social sharing
When a page is shared on a social network, the image displayed isn't the logo but a dedicated sharing image, generally in landscape format (1200 × 630 pixels is a very common size). It can feature the logo but doesn't replace it.
Frequently asked questions about a website logo
SVG or PNG for a website logo?
SVG is generally preferable: it stays sharp at every size and weighs little. A transparent PNG serves as a fallback or for uses that don't accept SVG.
What alt text should you put on a logo?
The business name, for example "Business name – home" when the logo links to the home page. Avoid repeating the word "logo".
More questions about logo design
How Do You Use Your Logo on a Business Card and Company Stationery?
Supply a vector file, place the logo consistently with a margin, and check size and colours on a printed test. Read the article →
How Do You Get Your Logo Printed on Clothing or Objects?
Each process has its constraints: start from a vector file and a simplified version, then approve a proof before production. Read the article →
What Are Logo Usage Guidelines?
It is the document that sets the logo's rules of use: versions, clear space, minimum size, colours, backgrounds and no-nos. Read the article →
What Should You Do With Old Materials When You Change Your Logo?
Take stock of your materials, change digital on launch day and print as it's renewed, limiting how long the two logos coexist. Read the article →
What File Formats Should I Request for a Logo So I Can Use It Across Different Materials?
A professional logo should be delivered as a vector file (SVG, PDF, EPS) for print, plus PNG and JPG exports for the web. Read the article →
How Do I Measure the Impact of a New Logo on My Brand's Recognition?
A new logo's impact is measured through recognition, perception and indirect signals, observed over 3 to 6 months. Read the article →
What Are the Key Elements of a Professional, Memorable Logo?
A good logo combines five qualities: simple, memorable, timeless, versatile and relevant to the business. Read the article →
See all questions about logo design →
My take as a designer
A website is where you see fastest whether a logo was designed for digital: sharp, light, legible small, with a favicon. When the logo has been prepared with its versions, adding it takes minutes; otherwise it becomes a small project.
A well-delivered logo goes in in ten minutes; a badly delivered one goes in in ten attempts.
To sum up
Favour SVG, with a transparent PNG as backup, a mobile version and a favicon.
Place the logo in the header with a link to the home page, and add alt text with the business name.
Test it on light and dark backgrounds and on mobile before publishing.
