How to Add Your Logo to a Website: Header, Favicon and Social Preview

Most logo guides stop at the moment the file is delivered. That is exactly where the difficult part begins. A mark that looks flawless in the presentation deck can end up stretched in a header, invisible on a dark background, blurry in a browser tab, and cropped in half when someone shares the page on LinkedIn.

This is a practical checklist for putting a logo on a website properly. It covers the five places your mark actually appears: the header, the favicon, the social preview, the footer, and the loading state. None of it requires a developer, but skipping any of it is immediately visible to visitors.

1. Start with the right file, not the one you were sent

The single most common mistake is uploading whatever the designer emailed. Brand handoffs usually contain a dozen files, and only one of them belongs in a website header.

For the web, you want SVG in almost every case. It stays sharp at any size, scales for retina displays with no extra files, supports transparency, and is usually smaller than the PNG equivalent. Keep a PNG at roughly twice your display size as a fallback for email signatures and any platform that rejects SVG uploads.

What does not belong on a website: EPS, AI, PDF and TIFF files. Those are print production formats. If that is all you have, convert the logo properly rather than screenshotting it.

Before you upload, open the SVG in a text editor and check it is not carrying a 400KB embedded raster image, which happens more often than you would think when a logo is exported from the wrong tool.

2. The header: size it once, protect the clear space forever

Header logos are almost always too big. A horizontal lockup wants roughly 28 to 40 pixels of height on desktop and 24 to 32 on mobile. Anything larger competes with your navigation and pushes the actual content below the fold.

Three rules that hold up across almost every site:

• Set height, let width follow. Constrain the logo by height and let the aspect ratio do the rest. Setting both dimensions is how logos end up subtly squashed.
• Respect the clear space. Your brand guidelines almost certainly define a minimum margin around the mark, usually derived from a letterform or the icon height. Padding, not a cramped flex gap, is what enforces it.
• Plan the sticky state. When the header shrinks on scroll, most full lockups become unreadable. Swap to the icon alone below a certain breakpoint or scroll position rather than shrinking the whole thing.

The logo in the header should also be a link to the homepage, and it needs real alt text. "Company name" is correct. "logo" is not, and neither is an empty alt attribute unless the company name already appears as text next to it.

3. The favicon is a separate design problem

A favicon renders at 16 to 32 pixels. Your full lockup will turn into grey mush at that size, every time. This is not a scaling problem you can solve with a better export.

What works is a dedicated, simplified mark: the icon on its own, a single letter, or a heavily reduced version of the symbol. If your identity is a pure wordmark with no symbol, use the first letter set in the brand typeface. Our breakdown of wordmarks versus symbol logos covers why symbol-led identities have an easier time here.

A complete modern favicon set is smaller than the old advice suggests:

• An SVG icon, which modern browsers prefer and which can adapt to dark mode
• A 32-pixel PNG fallback
• A 180-pixel Apple touch icon for iOS home screens
• A small web app manifest with 192 and 512 pixel PNGs

Test it on a dark browser theme before you call it done. A black icon on a dark tab bar disappears completely, which is the argument for keeping a monochrome version of the mark on hand.

4. The social preview: the image nobody checks until it is wrong

When someone shares your page in Slack, LinkedIn, WhatsApp or iMessage, the preview card is generated from your Open Graph image. If you have not set one, the platform picks something arbitrary, and often picks nothing at all.

The safe specification is 1200 by 630 pixels. Do not simply centre your logo on white: that reads as a broken image in most feeds. A preview that performs well usually contains the page title in large type, the logo small in a corner, and a brand-coloured background. Keep anything important away from the outer 60 pixels, because different platforms crop differently.

Set an image alt text for the preview too. It is read aloud by screen readers on several platforms and it costs you one line.

5. Footer, dark sections and loading states

The header is rarely the only appearance. Most sites also place the mark in the footer, on a dark call-to-action band, and sometimes in a loading or empty state.

You need at least three variants ready: full colour, all white, and all black. A brand with only a colour logo ends up with a white box floating on the dark footer, which is the single most recognisable sign that nobody checked. This is one of the reasons placement is a layout decision as much as a design one.

While you are there: give the logo image an explicit width and height so the page does not shift as it loads, and skip lazy loading for the header logo specifically. It is above the fold and lazy loading it delays the first thing visitors look at.

6. A quick pre-launch check

• The logo links to the homepage and has meaningful alt text
• It is sharp on a retina display and legible at mobile width
• The favicon is readable at 16 pixels on both light and dark tab bars
• A shared link produces a correct preview card with a real image
• Every dark section uses the white variant, not the colour one
• Nothing shifts position while the page loads

If the website itself is the next job

Everything above assumes a site already exists to put the logo on. If it does not yet, the fastest current route is describing what you want and editing the result rather than starting from a blank template: Modulify generates a responsive site with the header, footer, favicon and social preview already wired up, and their complete guide from prompt to live website walks through the whole sequence including hosting. If you would rather start from something visual, their free website templates can be cloned and rebranded.