Logo PNG sizes for websites, email and client handoff

Start with the placement

There is no single PNG size that fits every website, email signature and client presentation. A useful handoff tells the recipient which file to use and how large to display it.

For a website, ask for the logo's rendered CSS size at the relevant layout widths. A 200-pixel desktop header logo might be smaller on mobile. For email, check the template or signature editor rather than copying a website setting. For presentations, agree on a useful placement and inspect the exported slide at its intended resolution.

SVG can be a good option for vector logos where the receiving system accepts it. PNG is useful when you need a fixed-size image with transparency. Our logo format guide explains the wider choice.

Before exporting, record four things:

• Where the logo will appear and which file formats are accepted
• Its displayed width and height, including any transparent padding
• Whether a higher-density raster version is needed
• The upload's file-size limit and any resizing the platform applies

Continue with: logo format guide

Calculate the PNG dimensions

For a raster placement, use this planning rule:

Export width = displayed width × target pixel density.

Apply the same multiplier to the height. A 2× export doubles both dimensions, giving four times as many pixels overall. It does not mean the logo should appear twice as large on the page. The browser's device pixel ratio describes the relationship between physical display pixels and CSS pixels.

For the website example below, a 3× version would be 600 × 150 pixels. That is a separate requirement to agree with the developer, rather than a reason to export every possible size.

For responsive websites, a developer can provide multiple image candidates using srcset. This lets the browser select an appropriate resource. The exported files and the website's display settings need to agree.

These are worked calculations for a fictional Morrow Quay logo with a 4:1 canvas. They are illustrative project choices, not platform requirements or actual customer results.

Further reading: MDN: devicePixelRatio · MDN: responsive images

Check email dimensions in the actual editor

A 360 × 90 PNG is a sensible starting file for the example 180 × 45 signature only if the email setup constrains it to that intended display size. Insert it, check the size settings, and send a test email. Review the result in the clients your audience uses, including mobile if relevant.

An email's total template width is different from the width of its logo. Mailchimp, for example, documents different image recommendations for its new and legacy builders and recommends higher-resolution images with constrained dimensions for high-density screens. It also recommends RGB images and PNG when transparency is needed. Those are Mailchimp's guidelines, not a universal signature specification.

Use a logo version suitable for the background. A transparent white wordmark may appear empty on a white message. A dark wordmark may become difficult to see if the receiving client changes the background. Check the actual result before calling the asset ready.

Further reading: Mailchimp: image recommendations

Count the logo pixels inside the canvas

Pixel dimensions include empty space. Suppose a 400 × 100 PNG contains a visible 320 × 80 logo, centered with 40 pixels of left and right padding and 10 above and below. Display the whole image at 200 × 50, and the visible logo occupies only 160 × 40.

This may be intentional clear space. If it is accidental padding, correct the export boundary in the source. Keep any approved clear-space rule, and tell the developer whether that spacing is built into the file or should be added by the layout. Enlarging the entire image to compensate changes the apparent sizing again.

Export the sizes in Figma or Illustrator

Figma supports native custom raster exports. Select the prepared logo or frame, add a PNG export, and enter a width such as 400w in the Scale field. You can also enter a fixed height with h or use a multiplier such as 2x. A multiplier follows the selected object's dimensions, so check the resulting pixels.

Illustrator's Export for Screens and Asset Export workflows also support multiple scales and formats. Prepare the correct asset or artboard, choose PNG and the required scales, then verify the downloaded dimensions.

For a complete Figma handoff, follow our logo export workflow.

Continue with: logo export workflow

Further reading: Figma: export formats and settings · Adobe: collect assets and export in batches

Make the handoff understandable

Add a short note: “The website PNG is a 2× asset intended to display at 200 × 50 pixels. Preserve its proportions.” Keep the approved vector master so future sizes can be generated directly.

For repeated packaging work, logopack.app Pro adds custom PNG and JPG export sizes. Start with an approved SVG, choose the sizes for your destinations, and inspect the downloaded assets. Native editor exports remain a valid route; the packaging workflow is useful when you want those custom files alongside the rest of the delivery.

Before delivery, open the actual files, check their pixel dimensions and transparency, and place the priority asset in its real destination. If a correctly sized file still looks soft, use our blurry PNG troubleshooting guide.

Name files by the information the client needs. For this example:

• MorrowQuay_Primary_Web_400x100.png
• MorrowQuay_Primary_Email_360x90.png
• MorrowQuay_White_Slides_960x240.png

Continue with: blurry PNG troubleshooting guide

Further reading: Prepare a logo package with logopack.app