Logo Size: Dimensions for Websites, Social Media and Print

A professional logo needs to work in completely different contexts: small in the browser tab as a favicon, medium in the site header, large on a storefront banner, square in an Instagram profile photo, and horizontal on a business card. Each of these contexts has different dimensions and formats — and using the wrong size results in a blurry, cropped, or distorted logo.

The good news is you don't need to create different versions from scratch for each context. With the right file in the right format, ImageTools' Resize Image tool adjusts the dimensions for any use in seconds.

The formats you need to have of your logo

Before getting into specific sizes, understand which file formats you need to keep. A well-documented logo should have at least these versions:

• SVG (vector): the master file. Can be enlarged to any size — from a 16px favicon to a 30-foot billboard — with no loss of quality. Essential for use on websites, presentations, and sending to print shops.
• PNG with a transparent background (high resolution): for digital use where SVG isn't accepted. Save at least at 1000×1000px for resizing flexibility.
• PNG with a white background: for contexts where transparency isn't desired or supported — platform sign-up forms, Word documents, email.
• PNG or JPG dark version (white elements): for use over colored or dark backgrounds. A dark blue logo disappears completely against a black background.
• Favicon (.ico + PNGs): specific versions for the browser tab. Use ImageTools' Favicon Generator to generate every size you need from the logo.

Reference table — logo dimensions by context

Logo for websites

Header

In the site header, the logo is usually between 150px and 400px wide, with proportional height. The exact width depends on the layout — a compact header might use 150px, while a site with plenty of space can use 300–400px. What matters most is that the logo is sharp on Retina displays: export it as PNG at double the display width (or use SVG, which handles this automatically) and let CSS control the display size.

Always use SVG or PNG with a transparent background in the header — the header's background changes with the design and scroll, and a logo with a white background will create a visible white rectangle over colored backgrounds.

Favicon

A favicon is the icon shown in the browser tab, bookmarks, and mobile device home screens. An effective favicon is a simplified version of the logo — usually just the symbol or initial, without the company's full name, since the space is too small for legible text.

The sizes you need are: 16×16px and 32×32px for desktop browsers, 180×180px for iOS (Apple Touch Icon), and 192×192px and 512×512px for Android and PWAs. Use ImageTools' Favicon Generator to generate all of these sizes automatically from the logo.

Logo for social media

Why the logo needs to work in square and circular formats

Practically every social network displays the profile photo in a circular format. This creates a specific challenge for horizontal logos (name + icon side by side): in the circular space, the logo either ends up too small to read, or parts of it get cropped at the edges.

The most efficient solution is to have an "icon" version of the logo — just the brand's symbol or initials, centered in a square area — specifically for use as a social media profile photo. This version maintains visual recognition without the cropping problems.

Instagram

Instagram accepts profile photos up to 320×320px, but displays them at only 110px on the profile and 32px in the feed. The file must be square. If the logo is horizontal, center it in a square area with adequate padding so nothing gets cut off by the platform's circular crop.

Facebook

A Facebook page's profile photo is displayed at 170×170px on desktop and 128×128px on mobile, always cropped into a circle. The cover photo is 820×312px — in it, the logo usually appears as an element of the cover design, not filling the entire image.

LinkedIn

For company profiles, LinkedIn displays the logo at 300×300px (square) on the page and at smaller sizes in listings. It's one of the contexts where image quality most influences professional perception — use high-quality PNG, without excessive compression.

YouTube

The YouTube channel icon is displayed at very different sizes depending on the context: 98px on a smart TV, 32px in the desktop feed, 88px on a mobile profile. The file must be at least 800×800px to cover all these sizes sharply. The channel art (banner) is 2560×1440px, but the "safe area" — the region visible on every device — is just the centered 1546×423px. The logo needs to stay within that area.

WhatsApp Business

The WhatsApp Business profile photo is displayed in a circle, at a display size of about 50px in chats. Use a 640×640px file to ensure sharpness in full-screen previews. As with other social networks, horizontal logos don't work well here — use the icon or symbol version of the brand.

Logo for print

Printing follows completely different logic from digital. Pixel resolution isn't what matters — what matters is the relationship between pixels and the physical print size, measured in DPI (dots per inch). The print industry standard is 300 DPI.

How to calculate the pixels needed for printing

Formula: pixels = size in inches × DPI

Practical examples:

To avoid having to calculate this case by case, the most practical solution is to use SVG — the vector format scales without limit and can be printed at any size with no loss of quality. Any professional print shop accepts SVG (or its vector PDF equivalent, generated from the SVG in Illustrator or Inkscape).

Formats accepted by print shops

Most professional print shops accept and prefer:

• Vector PDF: the industry standard. Generated from Illustrator, Corel, or Inkscape with the logo in vector form.
• AI (Adobe Illustrator): native vector file.
• EPS: an older vector format, widely compatible.
• SVG: accepted by most modern print shops.
• High-resolution PNG: accepted when the vector file isn't available, as long as the resolution is enough for the print size.

Resizing the logo for each use

With the logo's base file in high-resolution PNG (at least 1000×1000px) or SVG, use ImageTools' Resize Image tool to adjust it to each platform's dimensions. The resizer lets you set exact width and height in pixels, keeping or adjusting the original aspect ratio.

Recommended workflow for preparing the logo's versions:

1. Always start from the highest-resolution file available — SVG or PNG above 1000px.
2. Resize it to the destination's dimensions using the Resize tool.
3. For social media, lightly compress it with the Image Compressor — keeping quality at 85–90% to avoid losing sharpness.
4. For printing, send the SVG directly or convert it to vector PDF.

Common mistakes when using the logo at different sizes

Using the same file for every context

A 2000px logo in an email signature will load slowly and appear huge. A 100px logo in an A4 print will look pixelated. Every context has its own ideal dimensions — use this guide as a reference and resize before using it.

Not having a version for dark backgrounds

Many logos are initially created in dark colors over a light background. In posts with a black or colored background — common in Instagram Stories and LinkedIn covers — the logo simply disappears. Always create and save a version with the main elements in white or a light color.

Saving an overly large PNG for social media

A 2000×2000px PNG for an Instagram profile photo doesn't improve display quality — Instagram compresses everything above the needed size. Upload it at the ideal dimensions (320×320px) with 90% quality compression to avoid double compression by the platform.

Using JPG for logos with a transparent background

JPG doesn't support transparency — when you save a transparent PNG logo as JPG, the transparent background gets replaced with white. If the logo needs a transparent background (to be used over different background colors), always use PNG or WebP.

Enlarging a small PNG instead of using the SVG

If the logo exists as SVG, always use the SVG as the base for resizing — never enlarge a small PNG. Enlarging a PNG creates pixelation that can't be fixed without the original vector file.

Don't have a logo yet? Create one now

If you don't have a logo yet or want to create a professional version, ImageTools offers two tools for this: the Logo Maker, where you choose icon, colors, and typography with full control, and the AI Logo Maker, where you describe your brand and the AI generates vector options ready to download. Both export as SVG and PNG — the formats you need for every use described in this guide.

Frequently Asked Questions