Which logo file formats work best for websites

Use an optimised SVG as your website logo. Supply a PNG fallback for the rare cases SVG will not render, and prepare a proper favicon pack for browser tabs and bookmarks.

SVG wins because it is a vector format, so the logo scales cleanly from a mobile header to a 4K monitor without a single blurred edge, and the file itself is usually tiny. PNG remains the fallback for email signatures, legacy CMS fields, and any logo built from photographic elements that vectors cannot represent well. JPG has almost no place in logo work; it cannot handle transparency and compresses sharp edges badly.

For favicons, generate a 512×512 master and export the standard small sizes plus an ICO container for older browser support. Every asset, logo included, should sit comfortably under 200 KB, and a well-built SVG will often land far below that.

  • Primary format: SVG, embedded or inlined in HTML
  • Fallback format: PNG, exported at 2x for retina screens
  • Rarely appropriate: JPG, only for photographic logo elements
  • Favicon pack: PNG sizes plus one ICO file, generated from a 512×512 source

Statistic to remember: keep the logo asset itself well under 200 KB. Anything heavier is dragging on page speed for no visual gain, particularly once you factor in Core Web Vitals scoring.

Key Takeaways

Point Details
SVG is primary Use SVG for the live website logo; it scales without quality loss and stays small.
PNG is the fallback Export PNG at 2x for retina screens, reserved for email or unsupported CMS fields.
JPG is a last resort Only acceptable when the logo genuinely contains photographic elements.
Favicon needs a pack Generate 16×16, 32×32, 48×48 PNGs plus one ICO from a 512×512 source.
Keep it light Target under 200 KB for the logo asset; optimise SVG paths and compress PNGs to get there.

Table of Contents

Logo file formats for web: SVG, PNG, JPG and vendor files compared

Each format has a job. Confusing them is the most common mistake MedwayWebDesign sees in client-supplied brand assets.

Comparison diagram of popular logo file formats for web

SVG is the default for anything rendered directly on a page: the header logo, footer mark, and any icon derived from the brand. Because it is built from mathematical paths rather than pixels, it holds crisp edges at any size and typically weighs a fraction of an equivalent PNG. You can embed an SVG as an <img> source or inline it directly in the HTML, which lets you control its fill colour with CSS, useful for dark-mode headers or hover states. The main risk with SVG is bloat: files exported straight from some design tools carry unnecessary metadata, editor comments, and overly complex paths. Before it ever touches a live site, run the file through an optimiser that strips metadata and simplifies paths, because poorly cleaned SVGs can balloon to hundreds of kilobytes, erasing the format’s whole advantage.

Hands exporting an optimized SVG file on computer

PNG earns its place wherever SVG cannot go: certain email clients, some older CMS logo fields, and situations demanding a fixed-pixel image with transparency. Export PNGs at 2x resolution so retina and high-DPI screens do not show soft edges; go to 3x only for assets that will be displayed unusually large. Choose PNG-24 for logos with gradients or soft shadows, and PNG-8 for simple flat-colour marks, since the smaller colour palette shrinks the file noticeably.

JPG should be avoided for logos in almost every case. It compresses using lossy algorithms that introduce artefacts around sharp lines, and it has no transparency channel at all. The only scenario where JPG makes sense is a logo that genuinely incorporates a photograph, which is rare.

PDF, AI, and EPS are vector master files, not web formats. Keep them as your editable source of truth and hand them to developers or print vendors, but never link to them directly from a live page.

Pro Tip: Ask your designer for the raw SVG code, not just the exported file, and paste it into an online SVG optimiser before it goes anywhere near your CMS. It takes two minutes and often halves the file size.

Vector versus raster: why scalable formats suit websites

A vector file stores a logo as a set of mathematical paths, points, and curves. A raster file stores it as a fixed grid of coloured pixels. That single distinction explains almost every practical difference between SVG and PNG.

Because a vector path is recalculated every time it is displayed, it looks identical at 20 pixels wide or 2,000 pixels wide. A raster image, by contrast, has a fixed pixel count baked in at export; stretch it beyond that and it turns blurry or blocky. This matters enormously for responsive websites, where the same logo has to render sharply on a phone screen, a laptop, and a retina display with double the pixel density, often within the same page load.

  • Vectors: infinite scaling, tiny files for simple shapes, fully editable colours and paths
  • Rasters: fixed resolution, larger files at high quality, no native editability

If your logo currently exists only as a raster, perhaps an old JPG from a previous designer, the fix is to have it redrawn as a vector rather than continuing to export ever-larger PNGs. Ask a designer to trace or rebuild it in vector software; it is a one-off cost that removes the scaling problem permanently.

Most website headers display a logo somewhere between 120 and 200 pixels wide, though the exact figure depends on your layout. A useful working rule: upload a source file wider than the largest size you expect to display, and let SVG’s vector nature or a correctly scaled PNG handle the rest.

  1. Set a safe display width. Aim for a moderate pixel width in the header to suit most small business sites; footer logos can run smaller.
  2. Export retina fallbacks. If SVG is unavailable, supply PNGs at 2x the display size, and 3x only where the design calls for an unusually large hero logo.
  3. Build the favicon pack. Generate a 512×512 master, then export 16×16, 32×32, and 48×48 PNGs alongside a single ICO file for older browsers.
  4. Compress everything. Run SVGs through an optimiser to strip metadata and simplify paths; run PNGs through a compressor that reduces colour depth without visible loss.
  5. Check the total weight. Keep every logo-related asset under the 200 KB guideline; a clean SVG will often finish in single-digit kilobytes.

A tool such as Apptenium’s app icon generator can speed up the raster export step if you need multiple icon sizes for app-adjacent branding alongside the favicon pack. The 200 KB figure is worth repeating: it is not a hard technical limit, but a practical ceiling past which a logo starts measurably slowing page load on mobile connections, exactly the kind of drag that shows up in Core Web Vitals reports.

Organising a logo file package your developer can use immediately

A confused handoff wastes more time than any design decision. The fix is a simple, consistent folder structure that separates editable masters from finished exports.

  1. /source – the editable master files: the AI or original vector document, plus a flattened PDF for anyone without design software.
  2. /exports/web – the optimised SVG, PNG at 1x and 2x, named clearly (logo-primary.svg, logo-fallback@2x.png).
  3. /favicon – the ICO file and the small PNG sizes generated from your 512×512 source.
  4. /docs – a short README noting brand colours in RGB values (not just CMYK), which fonts were used, and whether text has been outlined for portability.

Keep source files as vectors wherever possible; a package built from AI, EPS, and PDF masters alongside SVG and PNG web exports is the standard a designer should hand over without being asked twice. Note your brand colours as RGB hex values in the README, since colour choices carry accessibility and contrast implications once the logo sits against different background shades across the site.

Pro Tip: Version your exports with a date or number suffix (logo-v2-2026.svg) rather than overwriting the original file. It saves a painful search through old emails when a client asks for “the one from before”.

How MedwayWebDesign handles logo assets on client builds

The process runs in a fixed order.

  • Produce or receive a clean vector master of the logo
  • Optimise the SVG, stripping metadata and simplifying any overly complex paths
  • Export PNG fallbacks at 1x and 2x for retina screens
  • Generate the favicon pack from a 512×512 source, including the ICO file
  • Hand off a single zipped folder, organised by source, web exports, favicon, and documentation

This matters because logo placement is rarely just a header decision. It intersects with how the logo functions within the wider layout and how the site behaves across devices, which is why the SVG-first approach is treated as a baseline requirement, not an optional upgrade, on every build.

Primary sources to verify recommendations

Small business owners who want a professionally structured logo package, along with a website built to make full use of it, can look at how MedwayWebDesign approaches custom web design for growing brands. Businesses planning a fuller rebuild should also review MedwayWebDesign’s practical guide to business web design for what a complete project scope looks like beyond the logo itself.

An editorial take on format choice for small business owners

Most advice on this topic gets tangled in graphic-design theory when the actual decision is simple. You do not need to understand Bézier curves to know that an SVG logo will look sharp on every screen and load faster than a PNG doing the same job. The conventional guidance oversells the complexity and undersells the one thing that matters: whether you actually hold a clean, optimised file today.

Where I think the standard advice falls short is favicons. Everyone mentions them, almost nobody explains that a badly generated one, low resolution, wrong aspect ratio, will make a polished website look amateurish in a browser tab within seconds. It is a five-minute fix that gets treated as an afterthought.

If you take one thing from this, prioritise getting a proper vector master made if you do not already have one. Everything else, the PNG fallbacks, the favicon pack, the file-size trimming, is mechanical work that follows naturally once that master exists. Without it, you are patching raster files indefinitely and never fixing the underlying problem.

— Ian Rickard

Sources

Powered by
►
Necessary cookies enable essential site features like secure log-ins and consent preference adjustments. They do not store personal data.
None
►
Functional cookies support features like content sharing on social media, collecting feedback, and enabling third-party tools.
None
►
Analytical cookies track visitor interactions, providing insights on metrics like visitor count, bounce rate, and traffic sources.
None
►
Advertisement cookies deliver personalized ads based on your previous visits and analyze the effectiveness of ad campaigns.
None
Powered by