Logo Size Guidelines: Best Dimensions for Websites, Social Media, Print and Email

There is no single correct size for a logo. The right dimensions depend on where the logo appears, and the three things that actually matter are clarity at the target size, correct proportions for the surface, and a file type the platform can render cleanly.

This guide gives you practical size ranges for every common placement (websites, social media, print, email signatures, favicons), explains what to export and in what format, and finishes with a LogoDiffusion workflow for producing a full set of variants in one session. Best practice throughout: keep a vector master file, then export platform-specific PNGs from it whenever you need them.

Logo Sizing Basics (What Actually Matters)

Before picking a size, it helps to know what the numbers actually mean. A few rules apply to every placement you will ever design for.

• Logos are measured in pixels online and in inches or millimeters for print. The two units are not interchangeable. A 300-pixel logo will look different on a billboard than on a business card.
• Vector files scale without losing quality, which makes them the right choice for a master file. SVG is the standard vector format for web, and PDF or EPS is standard for print.
• You need multiple lockups, not just one. At minimum: horizontal, stacked (or square), and icon-only. Each one fits a different surface.
• File format matters as much as dimensions. SVG for vector, PNG for web graphics with transparency, PDF or EPS for professional print.
• Never upscale a small logo. Export the original at the largest size you will ever need, then scale it down. Going the other way makes the logo look blurry and pixelated.

‍

Recommended Logo Variations (So One Size Fits Every Placement)

A working logo is not a single file. It is a small system of variants designed to work across every context your brand will run into. Build these six versions from your primary mark, and you will be ready for almost anything.

• Primary logo (full lockup). This is the complete version of your mark, used wherever you have room for the full design.
• Horizontal lockup. Icon and wordmark side by side. Works in website headers, email signatures, and wide letterheads.
• Stacked or square lockup. Icon above or inside a square boundary. Fits social avatars, business card corners, and app tiles.
• Icon-only or monogram. Just the symbol. Used for favicons, app icons, and small avatars where the wordmark would be unreadable.
• One-color version (black on white, white on black). For single-color printing, embossing, engraving, and any surface where color is not an option.
• Inverse version for dark backgrounds. A light-on-dark version of your primary logo. Saves you from reinventing it every time you need to place it on a dark header.

Key takeaways:
A logo is a system of variants, not a single file.
Six core versions cover the majority of real-world placements: full, horizontal, stacked, icon-only, one-color, and inverse.
Build these upfront so you are not scrambling when a new context appears.

‍

Logo Sizes for Websites

Your website logo has two jobs. The header version needs to read at a glance without dominating the nav bar. The favicon needs to be recognizable in a browser tab that is roughly the size of a fingernail.

Header / Navigation Logo

There is no universal header size. Most modern website themes display logos in a bar that is 60 to 90 pixels tall, and the logo itself usually sits somewhere between 20 and 40 pixels high inside that bar. The width depends on whether you are using a horizontal lockup or a stacked version.

Use these as starting points, then fine-tune to the specific theme:

• Horizontal lockup: 250x150 pixels, 350x75 pixels, or 400x100 pixels. Wider ratios work best in standard navs.
• Square or stacked: 160x160 pixels. Good for themes with a centered logo or a vertical nav.

Whatever size you choose for the display, export the actual file at 2x resolution. A 400-pixel-wide logo should be exported at 800 pixels to stay sharp on high-density displays (Retina, 4K). The browser handles the downscaling.

Website Favicon Sizes

The favicon is the tiny icon in the browser tab next to your site name. You need three sizes to cover every browser and device:

• 16x16 pixels: legacy browsers and taskbar pinning.
• 32x32 pixels: standard modern favicon size. This is what most browsers actually render.
• 48x48 pixels: Windows site icons and higher-resolution tabs.

If you want your site to display a crisp icon when someone saves it to an iPhone or iPad home screen, also export a 180x180-pixel Apple Touch Icon. At these sizes only the icon-only version of your logo will read. The full lockup will turn into a smudge.

‍

Logo Sizes for Social Media (Profiles + Covers)

Every platform has its own spec, and they change more often than you would expect. The numbers below are current, but always double-check the platform's help docs before a major brand launch. Also worth knowing: most platforms crop profile images into circles at display time, even when the upload is square. Keep your important elements centered.

Three rules apply across every platform:

• Use your icon-only or stacked version for profile avatars. The full lockup almost never fits inside a circle.
• Use PNG format for crisp edges on logos. JPG introduces compression artifacts that show up as fuzzy halos around sharp shapes.
• Keep file sizes reasonable (under 1 MB for avatars, under 3 MB for covers). Large files get re-compressed by the platform, which degrades quality.

‍

Logo Sizes for Print (Common Real-World Placements)

Print is a different game. The unit is inches or millimeters, the color mode is CMYK (not RGB), and the file format professional printers expect is usually a vector (PDF, EPS, or sometimes SVG). Ask your printer what they need before exporting. Getting this wrong costs a print run.

A good general rule: print files should be 300 DPI or better at final size. Vector files sidestep this entirely because they scale without losing quality.

Practical size ranges for the most common print items:

• Business card: Keep the logo readable without filling the card. A safe width is 1.0 to 1.75 inches, depending on layout. Standard business cards are 3.5 x 2 inches.
• T-shirt print area: Up to about 14 x 15 inches for a full chest print, though most logos sit in a 4 to 5-inch area on the upper chest. Varies by printer.
• Mug print area: Roughly 8.5 x 3 inches wraps around a standard mug. The logo usually appears 3 to 4 inches wide in the printable zone.
• Baseball cap: Small front embroidery area, typically 3 to 3.5 inches wide and 1.5 inches tall.
• Letterhead: Header logo usually sits at 1.5 to 2 inches wide, positioned in the top-left or top-center.

One color-mode reminder: CMYK is for anything printed on paper or fabric. RGB and HEX are for screens. If you hand a printer an RGB file, the colors will shift. Convert your master to CMYK before exporting print files, and proof the colors on paper if the brand is color-critical.

‍

Logo Sizes for Email Signatures

An email signature logo has two constraints most other placements do not. It has to load fast, and it has to look right in dozens of different email clients (Gmail, Outlook, Apple Mail, and various mobile apps all render things slightly differently).

The practical rule is to keep it lightweight and readable. A good range:

• Width: around 320 pixels maximum.
• Height: 70 to 100 pixels, depending on whether you are using a horizontal lockup or a stacked version.
• Format: PNG with a transparent background so the logo sits cleanly on whatever background color the recipient's email client uses.
• File size: under 40 KB if possible. Oversized signature images get stripped or flagged as suspicious by spam filters.

Host the image on a public URL (your website, a CDN) and link to it from the signature HTML. Embedding the image directly bloats every email you send.

‍

File Types: PNG vs JPG vs SVG (Quick Rulebook)

Picking the right file format is not complicated, but getting it wrong makes your logo look unprofessional. Here is what each format is actually for:

When you hand off logo files to someone else (a developer, a printer, a partner brand), deliver a full set. Here is the minimum checklist:

• SVG master (the source vector file)
• Transparent PNG at 2000 pixels wide (large enough to downscale for anything)
• Black version and white version (for one-color use)
• Icon-only version in both SVG and PNG
• PDF or EPS if a printer is in the chain
  ‍

Common Mistakes (and How to Avoid Them)

Most logo sizing problems come from a small number of repeated mistakes. Avoid these and you will skip 90% of the usual issues:

• Uploading a low-resolution logo and stretching it to fit. The result is blurry and pixelated. Always start from the highest-resolution source file you have.
• Using JPG for logos. JPG compression introduces halos and fuzzy edges around sharp shapes. Use PNG for web and SVG for anything scalable.
• Skipping the dark-mode or inverse version. Half the internet now renders in dark mode. A black logo on a black background is effectively invisible.
• Not testing at small sizes. A logo can look great at 400 pixels and become unreadable at 32. Always preview at favicon and avatar sizes before you lock the design.
• Ignoring safe margins. Most platforms crop profile images into circles and banners have hidden edges. Keep important elements away from the corners.

‍

Export Checklist (LogoDiffusion Workflow)

The fastest way to produce a full set of logo variants is to start from a vector master and generate everything else from it. LogoDiffusion outputs vector-ready files you can export in every format listed above. Here is the workflow that gets you from one logo to a complete export set in a single session.

Step 1: Create or export a vector master (SVG). This is the source file that everything else comes from. Keep it editable and store it somewhere you will not lose it.

Step 2: Export high-resolution PNGs with transparent backgrounds. At minimum, export 2000 pixels wide. You can always scale down; you cannot scale up.

Step 3: Produce the lockups. Horizontal, stacked, and icon-only versions from the same source mark.

Prompt example: "Create a horizontal and stacked version of this logo. Keep proportions consistent, improve spacing, scalable vector style."

Step 4: Create black, white, and inverse versions. For single-color applications and dark-mode interfaces.

Prompt example: "Generate an icon-only version that stays recognizable at 32 pixels. Simplify any fine detail."

Step 5: Test across contexts. Put the logo in a website header mockup, a social avatar at 110 pixels, a favicon at 32 pixels, and a print preview. If any of those break, refine before you ship.

Prompt example: "Create black, white, and inverse versions of this logo for dark backgrounds. Keep edges crisp and maintain identical proportions across all three."

Conclusion

There is no single correct logo size. There is only the right lockup, the right file format, and the right pixel dimensions for the specific surface. Keep a vector master, build the six variants (full, horizontal, stacked, icon-only, one-color, inverse), and test at the smallest size the logo will ever appear. Export an SVG and PNG set from LogoDiffusion, run through the checklist above, and you will be ready for every placement your brand will run into.

‍