Recommended Free Tools
The correct logo size is the width and height required by your website’s logo slot—not a universal pixel number. Start with the highest-quality source, set one target dimension, lock the aspect ratio, export in a format your site accepts, and inspect the result in the real header. Use SVG for vector artwork when supported; use PNG when a bitmap logo needs transparency or exact graphic detail.
Start with the website’s logo slot
Before opening an editor, inspect the website builder, theme, or CMS documentation and its logo settings. Record:
| # | Preview | Product | Price | |
|---|---|---|---|---|
| 1 |
|
Logo Design. Global Brands | $23.30 | Buy on Amazon |
| 2 |
|
Principles of Logo Design: A Practical Guide to Creating Effective Signs, Symbols, and Icons | $22.30 | Buy on Amazon |
| 3 |
|
Logo, revised edition | $22.04 | Buy on Amazon |
| 4 |
|
Logo Design (Bibliotheca Universalis) (Multilingual Edition) | $13.99 | Buy on Amazon |
- the recommended or maximum display width and height;
- accepted file types and upload-size limits;
- whether the header displays the image at its intrinsic size or constrains it with CSS;
- whether the logo is cropped, padded, centered, or placed inside a fixed box; and
- whether separate desktop and mobile logo settings exist.
Those requirements determine your target dimensions. There is no single width and height that fits every website. A theme might reserve a wide, shallow slot, while another may use a square mark beside the site name. If the documentation gives only a maximum width, keep the original ratio and calculate the corresponding height instead of forcing the image into a preset rectangle.
Choose the best source file
Use a vector master when possible
An SVG or other vector master is usually the best starting point for a logo. Vector artwork is defined by paths rather than a fixed grid of pixels, so it can be rendered sharply at different sizes. SVG is particularly suited to logos and other non-photographic graphics when the destination accepts it.
#1 Best Overall
Ask the designer for the original vector file if all you have is a small JPEG or PNG. Re-exporting a tiny bitmap at a larger size cannot recreate detail that was already discarded.
Use a bitmap master carefully
For a bitmap logo, use the largest, cleanest original available. PNG is useful when the logo needs an alpha-transparent background or precise reproduction of text and flat graphic details. JPEG has no alpha channel, so it cannot preserve transparent areas. WebP can provide modern raster compression and transparency, but verify that the website’s uploader and browsers handle it as expected.
Resize without stretching
Lock the aspect ratio before entering a new width or height. If the original image is W pixels wide and H pixels high, the ratio is W ÷ H. When you choose a new width W₂, calculate the height as:
H₂ = W₂ × (H ÷ W)
For example, a 1,200 × 300 logo has a 4:1 ratio. Resizing it to 600 pixels wide produces a 150-pixel height. Entering 600 × 100 instead would compress the vertical dimension and visibly distort the mark.
Most editors expose an aspect-ratio lock beside the width and height fields. Enable it before changing either value. If an application offers a “fit,” “contain,” or proportional-resize option, choose that rather than “stretch” or an unconstrained crop. The exact control name varies by application, but the principle is the same: set one dimension and let the other follow the intrinsic proportions.
Rank #2
Editor-agnostic resizing workflow
- Open the original. Work from the vector master or the largest lossless bitmap available. Do not repeatedly resize an already-compressed JPEG.
- Set the target dimension. Enter the width or height required by the site’s logo slot. Keep the aspect-ratio lock enabled.
- Check the canvas. If the logo includes intentional clear space, decide whether that space belongs in the file or should be supplied by the site’s CSS. Do not crop away a required part of the design.
- Inspect edges and lettering. At the intended display size, look for softened small text, jagged diagonals, clipped strokes, or an accidental background color.
- Choose the export format. Select SVG for accepted vector uploads, PNG for transparent or detail-sensitive raster artwork, WebP when the destination supports it, and JPEG only for opaque photographic content.
- Export once from the source. Avoid a chain of JPEG exports. Keep the original master untouched so you can produce another size later.
- Upload and preview in context. View the logo in the actual header on desktop and mobile widths. A file that looks correct on a white editor canvas can disappear against a dark header or reveal unwanted padding on the site.
Format and export decisions
| Format | Use it when | Watch for |
|---|---|---|
| SVG | The source is vector artwork, the site accepts SVG, and the logo must stay sharp at varying sizes. | Confirm the destination’s SVG policy and handling. SVG is intended for graphics, not strictly photographic content. |
| PNG | A bitmap logo needs transparency or faithful reproduction of graphic detail. | PNG can be larger than aggressively compressed formats, so optimize and check the exported file. |
| WebP | You need a modern raster export and the target site supports WebP, including any required transparency. | Check upload validation and compatibility before making it the only version. |
| JPEG | The image is photographic and has an opaque background. | JPEG has no alpha channel and is unsuitable for a transparent logo background. |
When exporting PNG, enable transparent background only when the design requires it. Open the exported file against both a light and dark background; a solid white or checkerboard-looking canvas can reveal that transparency was not actually preserved. Some editors make transparent export a plan-dependent option, so verify what your account and application support.
Make the website display the file predictably
Do not rely only on the file’s pixel dimensions. The site may scale the image with CSS. A proportional rule such as the following prevents the browser from assigning a conflicting width and height:
<img src="/images/logo.svg" alt="Your company name" style="width: 240px; height: auto;">For a raster logo, the same principle applies:
<img src="/images/logo.png" alt="Your company name" style="max-width: 100%; height: auto;">Use meaningful alternative text when the logo communicates the organization’s name. If the logo is purely decorative next to a text heading that already names the site, an empty alternative attribute may be more appropriate according to your accessibility policy. Keep the logo’s proportions controlled by one dimension and an automatic other dimension; assigning unrelated width and height values is a common cause of stretching.
Free tools Windows power users keep installed
One-click scans. No signup required.
Optimize file weight after resizing
Resizing reduces pixel data, but it does not guarantee a small download. Remove unnecessary metadata, use the least aggressive compression that still looks clean, and compare the exported file size with the visual result. The best setting depends on the artwork: flat-color logos often compress differently from photographs or logos with gradients.
- Keep a lossless or vector source so you can export again at another size.
- Do not enlarge a small bitmap merely to satisfy a large slot; obtain a better source where possible.
- Do not convert a transparent logo to JPEG just to reduce bytes.
- Retest after optimization, because overly aggressive compression can blur fine lettering and create halos around transparent edges.
- Check the real page, not just a file viewer. Header backgrounds, high-density displays, and responsive breakpoints can expose problems that are invisible in isolation.
Validation checklist
- The uploaded dimensions match the site’s stated slot or maximum.
- The width-to-height ratio matches the original artwork.
- No letters, strokes, or clear-space boundaries are clipped.
- Transparency appears only where intended.
- The logo remains legible at the smallest mobile header size.
- The format is accepted by the CMS and displays in the browsers your audience uses.
- The optimized file is no larger than necessary without visible quality loss.
- Alternative text and surrounding heading structure make the brand identifiable to screen-reader users.
Troubleshooting common failures
The logo looks squashed or stretched
One dimension was probably entered independently of the other, or CSS is setting both width and height. Reopen the original, enable the aspect-ratio lock, set only the required dimension, and use height: auto (or the equivalent proportional setting) on the page.
Rank #3
The logo has a white box around it
The export likely used an opaque canvas. Re-export as PNG with transparency enabled, or use an SVG with no background rectangle. Confirm the result against a colored background before uploading.
The site rejects the SVG
The CMS may disallow SVG uploads for security or configuration reasons. Use an optimized PNG or WebP instead, or ask the site administrator whether SVG uploads can be enabled safely. Do not rename a PNG to “.svg”; that changes only the filename, not the file format.
The image is blurry at the displayed size
Check whether the source was a small bitmap enlarged during export. If so, return to a vector master or a larger original. Also verify that the site is not scaling a raster file far beyond its exported dimensions and that optimization did not apply excessive compression.
The logo is cropped in the header
The theme may be using a fixed box with a crop or cover behavior. Review its logo-display setting, choose a contain/proportional option when available, and include the required clear space in the source only if the design calls for it. A wider or taller slot may require a separate lockup rather than a forced crop.
The file is accepted but does not appear
Check the final image URL, permissions, MIME type, and browser cache. Open the URL directly in a new tab, then inspect the page at both desktop and mobile breakpoints. A transparent image on a matching background can look missing even when it loaded correctly.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
After uploading the resized logo, you can use ScreenshotNeo to capture the live page and verify the header at a chosen viewport. Its screenshot API returns a PNG, JPEG, WebP, or PDF from one GET request, and its options include device presets, custom viewports, full-page capture, element selection, dark mode, retina scale, custom CSS or JavaScript, click actions, selector waits, network-idle waits, blocked resources, cookies, headers, geolocation, and caching.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchSee the ScreenshotNeo documentation for request parameters. This cURL example captures a page after you publish the logo:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpThe same request in Python:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)And in Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Before the capture, ScreenshotNeo accepts the cookie or consent banner like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing state in X-Page-Verdict and X-Billed headers. Its MCP server lets Claude, Cursor, and other MCP clients use take_screenshot, get_page_info, and capture_pdf without you wiring a browser automation stack.
The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Every feature is included on every plan, and yearly billing gives two months free. Create a free ScreenshotNeo account to check your resized logo on the live site.
FAQ
Frequently Asked Questions
Should the logo file include the whitespace around the mark?
Include whitespace only when it is part of the intended brand lockup. If the theme already supplies padding, remove duplicate empty canvas area so the visible mark aligns correctly.
Can I keep both SVG and PNG versions?
Yes. Keeping a vector master and an optimized PNG fallback lets you meet destinations that have different upload policies without recreating the artwork.
Why does a logo look different in the editor and on the website?
The site may apply its own scaling, crop, background, or responsive rules. Validate the uploaded asset inside the actual header at each breakpoint rather than judging only the editor canvas.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
