Logo Sizes for Websites and Social Media — the 2026 Cheat Sheet
«Send us the logo for the website» — at what size? There's no single answer in pixels: a site header shows the logo at 120–200 px, a Telegram avatar squeezes it into a circle, search results shrink it to 16 px. The same mark lives at a dozen sizes at once. Here's the cheat sheet for every major placement, plus the file‑prep rules.
For websites — SVG at 28–40 px height in the header; being vector, it's sharp everywhere. For social — a square PNG of 512×512 or larger with a big centered mark: platforms slice it into their own sizes. The #1 mistake is uploading a horizontal text logo as an avatar: after the circular crop, an unreadable stump remains.
Logo on a website
| Placement | Recommendation |
|---|---|
| Header (desktop) | height 28–40 px, width up to ~200 px |
| Header (mobile) | height 24–32 px |
| Footer | can be smaller, often monochrome |
| Favicon | 16–48 px, a separate simplified mark |
Three rules:
- Format — SVG. One file covers every screen density. PNG‑only? Use twice the display size, or retina screens will blur it (see why logos look blurry).
- Set the height, not the width. Logos of different proportions align by height in a header — that's what looks balanced next to navigation.
- Don't stretch it across the header. A giant logo screams 2008. It should be noticeable, not dominant.
Social media avatars
Platforms ask for a square but often display a circle. The mark must live confidently inside a circle: no important details in the corners.
| Platform | Upload size | Display |
|---|---|---|
| Telegram | 512×512+ | circle |
| VK | 400×400+ | circle |
| YouTube | 800×800 | circle |
| 500×500 | circle | |
| X (Twitter) | 400×400 | circle |
Uploading the full horizontal "mark + name" logo as an avatar. After the circular crop the text is cut off or microscopic. An avatar gets the mark only — icon, letter, symbol — filling 60–80% of the square.
For the specifics of a Telegram channel avatar (circular crop, legibility at 40 px) see the dedicated Telegram channel avatar guide. For full YouTube channel branding — cover, watermark, safe areas — see the YouTube channel branding guide.
Covers and previews
| Placement | Size |
|---|---|
| OG preview (link cards in social/messengers) | 1200×630 |
| VK community cover | 1920×768 |
| YouTube channel banner | 2560×1440 (safe area 1546×423) |
The OG preview is an underrated touchpoint: it's what people see when your link is shared in Telegram or VK. Keep the logo in the central safe zone — edges get cropped on different devices.
Logos in email
Email clients are restriction territory: SVG support is poor, so this is the exception to "always vector".
- Format: transparent PNG.
- Layout width 120–200 px; the file itself 2× that (240–400 px) for retina.
- Always set the
widthattribute and alt text: many recipients have images off by default and see the alt instead of the logo.
Print: a different coordinate system
Print sizing uses physical units at 300 dpi, not pixels. Business card, letterhead, signage — always hand over vector (SVG, EPS, PDF) and the size question disappears: vectors scale to any medium. Which format for what — in the logo format guide.
A full kit in 10 minutes
- Take the logo's SVG master and a separate SVG of the mark alone (no text).
- From the mark, export 512×512 and 1024×1024 PNGs — covers every avatar. The same 1024×1024 is what App Store requires for a mobile app icon — rules and gotchas in the app icon guide.
- From the full logo — a 400 px wide PNG for emails and documents.
- Check every version on light and dark backgrounds; if the mark vanishes on dark, you need a light variant.
Store raster versions at 2× what platforms require. Downscaling takes a second; lossless upscaling is impossible. Better yet, store the vector and generate raster on demand.
Your logo in search results and snippets
Two more homes for your logo that get forgotten:
- The favicon in search results — Yandex and Google show the site icon next to the snippet; without one, a gray globe takes the seat. Requirements and assembly — in the favicon guide.
- The organization logo for search engines — pulled from
Organizationmicrodata (thelogofield) and business profiles. Recommendations: square‑ish, 112×112 minimum, at a stable URL. This is the logo that surfaces in knowledge panels. - OG markup — link previews are built from
og:image(1200×630). Without an explicit OG image, social networks grab a random picture off the page — set it deliberately, logo in the central safe zone.
Serving densities properly: srcset
If you must use PNG in markup (say, a photographic logo), serve two densities via srcset and let the browser pick:
<img src="/logo-200.png"
srcset="/logo-200.png 1x, /logo-400.png 2x"
width="200" height="60" alt="Company logo">SVG needs none of this — one URL covers every density, which once more argues for vectors.
The carrier checklist: save this
| Carrier | File | Size |
|---|---|---|
| Site header | SVG | 28–40 px height in layout |
| Favicon | SVG + ICO + PNG | 32/180/192 |
| Social avatars | square PNG | 1024×1024 (mark at 60–80%) |
| OG preview | PNG/JPG | 1200×630 |
| PNG | 240–400 px wide (displayed 120–200) | |
| Decks | SVG or PNG | PNG from 800 px wide |
| Messengers/stickers | PNG | 512×512 |
| vector (PDF/EPS/SVG) | any physical size | |
| Structured‑data logo | PNG | 112×112+, square |
Assemble these once into a folder with sane names — and "what size logo do I need for…" stops being a question. The full kit and formats — in the logo format guide.
In short
Website — SVG at 28–40 px height; social — a square PNG of 512+ px with the mark only; email — PNG at double size; print — vector. And never put a horizontal logo into a circular avatar.
Our logo catalog makes the sizing easy: every brand ships as SVG and PNG, and the PNG can be downloaded at any size — from icon to 4K.