# Logo sizes for websites, socials and print

[Canonical HTML page](https://gradiently.design/guide/logo-sizes)

People ask for the right logo size as if there were one number. There isn't: there is one master file and a sensible size for every place it lands. Here are those places, with the canvas sizes and the files to use.

## The short version

- There is no single correct logo size; keep one vector master file and export from it for each place the logo appears.
- On websites, use an SVG logo and set its size by height in CSS so it stays sharp on every screen.
- For social profile pictures, upload a square image and keep the logo well inside the centre, because most platforms crop profile pictures to a circle.
- When exporting a PNG logo, make it at least twice the size it will be displayed so it stays crisp on high density screens.
- For print, use a vector PDF or SVG, or a raster file at 300 dpi at the final printed size.

There is no single **logo size** that works everywhere. Keep your logo as a vector master, an SVG or PDF, which scales to any size without blurring, and export from it for each place it goes: an SVG sized by height for your website header, a square version for profile pictures, a horizontal version for banners and a 300 dpi file for print. What changes from place to place is the canvas and how much of it the logo should fill.

## Start with a master file, not a size

Vector files describe shapes rather than pixels, so the same file is sharp on a phone and on a shop front. Every other file you make should be exported from this master, never from a screenshot or an old PNG. If you only have a small raster logo, get it redrawn as a vector before anything else; it will save you trouble on every job after.

| File | Type | Use it for |
| --- | --- | --- |
| SVG | Vector | Websites, apps, and as the master for screen work |
| PDF | Vector | Printers, signage and anything sent to a supplier |
| PNG with transparency | Raster | Slides, documents, social posts and email |
| JPG | Raster | Only where a solid background is fine, never for a logo that sits on colour |

Two vector files and one transparent PNG cover almost every request. [SVG vs PNG](https://gradiently.design/guide/svg-vs-png) explains the trade off in more detail.

## Website logo size

On a website, size the logo by height, not width, so a wide wordmark and a compact symbol sit on the same baseline in your header. Use the SVG so it stays crisp on high density screens, and give it a sensible maximum width for small phones.

```html
<a class="logo" href="/">
  <img src="/logo.svg" alt="Fern Studio" width="120" height="32">
</a>

<style>
  .logo img {
    height: 32px;   /* set by height */
    width: auto;
    max-width: 40vw; /* never crowds a small phone */
  }
  @media (min-width: 768px) {
    .logo img { height: 40px; }
  }
</style>
```

The width and height attributes reserve space so the page doesn't jump while the logo loads. The heights here are a starting point; adjust them to your header.

Your favicon is a separate, square, simplified file, not the full logo shrunk. Browsers show it at very small sizes, so it usually becomes a single letter or symbol. [Favicon design](https://gradiently.design/guide/favicon-design) lists the exact files, and Google's [favicon guidelines](https://support.google.com/webmasters/answer/9290858) ask for a square icon at a multiple of 48 pixels.

## Logo size for social media

Social platforms use your logo in two very different places: the small profile picture and the wide cover or banner. They need different versions of the logo, not the same file squeezed in.

### Profile pictures

- Upload a **square** image. Most platforms crop profile pictures to a circle, so the corners disappear.
- Use your **icon or stacked** version, not a long horizontal lockup. A wide wordmark becomes unreadable in a small circle.
- Keep the logo inside roughly the **middle two thirds** of the square, with even space all round.
- Put it on a **solid colour or a calm background** that fills the square, so the circle looks deliberate.
- Check it at the real size on your own phone before you change it everywhere.

A square profile image with the wordmark fern centred on a green gradient, leaving space around it for a circular crop

A short wordmark centred with generous margins survives the circular crop.

A wide LinkedIn profile banner with the words Fern Studio and Plants for small spaces on the same green gradient

The banner can carry the full name and a line about you, because it has the width for it.

### Covers and banners

Cover images are wide and get cropped differently on phones and desktops, and the profile picture often overlaps one corner. Keep your logo and words near the centre, and let the background carry to the edges.

- Facebook cover 1640×624: 1640 × 624
- LinkedIn banner 1584×396: 1584 × 396
- X header 1500×500: 1500 × 500
- YouTube channel art 2560×1440: 2560 × 1440

Four common banners, drawn to scale. They are all much wider than they are tall, so a horizontal logo or a simple name line suits them best.

On posts, the logo is a signature, not the headline. A good starting point is to keep it small, in a consistent corner, at the same size on every post, so it builds recognition without competing with the message. [Social media image sizes](https://gradiently.design/guide/social-media-image-sizes) has every post size.

## Logo sizes for email and print

| Place | Canvas size | Logo file |
| --- | --- | --- |
| Email header | 1200×600 | PNG, exported at twice its display size |
| Email signature | 600×200 | Small PNG; many email apps block SVG |
| Link preview (Open Graph) | 1200×630 | Logo kept near the centre, PNG or JPG |
| Business card | 1050×600 at 300 dpi | Vector PDF from the master |
| A5 flyer | 1748×2480 at 300 dpi | Vector PDF from the master |
| A4 poster | 2480×3508 at 300 dpi | Vector PDF from the master |

Print sizes are given in pixels at 300 dpi. Vector logos print sharp at any size; raster logos need 300 dpi at the final printed size.

Email is the awkward one: many email apps do not show SVG images, so use a transparent PNG. Export it at twice the width you want it to display, then set the display width in the HTML, so it stays sharp on high density phone screens. For print, read [image resolution for print](https://gradiently.design/guide/image-resolution-for-print) before you send anything to a printer, and see [email signature design](https://gradiently.design/guide/email-signature-design) for the signature itself.

> **Export at twice the display size** A PNG shown at 200 pixels wide should be exported at 400. High density screens pack two or more device pixels into each CSS pixel, and a logo exported at exactly the display size looks soft on them.

## Making every size from one design

The tedious part of logo sizes is not the logo, it's rebuilding the cover, the post, the story and the card around it each time. In Gradiently you can ask the Designer for the other sizes, or with Pro resize a design to every size in one step, and your background renders fresh at each shape rather than being cropped. Custom sizes go from 200 to 8,000 pixels when a supplier asks for something unusual. [Logo variations](https://gradiently.design/guide/logo-variations) covers which version of the logo to drop into each one.

## FAQ

### What size should a logo be?

There is no single size. Keep a vector master file and export a version for each use: SVG for websites, a square PNG for profile pictures, wide banners for covers and vector PDF for print.

### What is the best logo size for a website?

Use an SVG and set it by height in CSS so it fits your header on every screen. Supply width and height attributes so the page doesn't shift while it loads.

### What size should my logo be for social media profile pictures?

Upload a square image and keep the logo in the middle two thirds, because most platforms crop profile pictures to a circle. Use your icon or stacked logo rather than a wide one.

### What resolution should a logo be for print?

Use a vector PDF or SVG, which prints sharp at any size. If you only have a raster file, it needs 300 dpi at the final printed size.

### Why does my logo look blurry?

It was probably exported at its display size, or upscaled from a small file. Export PNGs at twice the display size from a vector master, or use SVG on the web.