Logo sizes for websites, socials and print

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.

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.

<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>

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 lists the exact files, and Google's favicon guidelines 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.

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.

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 has every post size.

Logo sizes for email and print

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 before you send anything to a printer, and see email signature design for the signature itself.

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 covers which version of the logo to drop into each one.