# Twitter branding on X: header, avatar and post images

[Canonical HTML page](https://gradiently.design/guide/x-branding)

On X your brand mostly appears as a tiny circle beside a few lines of text. That makes the few visual things you control more important, not less.

## The short version

- Twitter branding on X rests on four visuals: the avatar, the 1500×500 header, post images and the link cards your website produces.
- The avatar appears beside every post and reply, so it should be a simple symbol or tight portrait that reads at a very small size.
- X post images work best at 1600×900 for landscape or 1080×1350 for portrait.
- Link cards come from your website's meta tags, so a 1200×630 Open Graph image in your brand look makes every shared link recognisable.
- Using the same background family on the header, post images and link cards ties scattered posts into one visible brand.

**Twitter branding** on X comes down to four visuals you control: the avatar beside every post, the 1500×500 header on your profile, the images you attach to posts, and the link cards your own website produces when someone shares it. Most of the time people meet you as a small circle and a few lines of text in a fast feed. So each visual has to be simple, and all four have to look like they came from the same place.

## Your X brand kit at a glance

| Visual | Size | Where people see it |
| --- | --- | --- |
| Avatar | Square, shown as a circle | Beside every post, reply and mention |
| Header | 1500×500 | Top of your profile |
| Landscape post image | 1600×900 | In the timeline, full width |
| Portrait post image | 1080×1350 | In the timeline, taller on phones |
| Link card | 1200×630 | Whenever anyone shares your website |

Five pieces. Design them as a set on one background and the account looks deliberate even when the posts are casual.

## An avatar that survives the timeline

Your avatar is the most repeated image you have. It sits beside every reply, in notifications and in other people's quote posts, often smaller than a fingernail. A full logo with a wordmark disappears at that size. Use a single symbol, a monogram or a tight head and shoulders portrait, on a solid or softly lit background in your brand colour. Keep it the same on every platform, so people who follow you elsewhere spot you instantly.

> **Avoid changing it often** People scroll by shape and colour, not by reading names. A new avatar every few weeks resets the recognition you have built.

## Designing the X header

The header is 1500×500, a 3:1 strip. The avatar overlaps its lower left, and different screens crop the top and bottom slightly, so keep words in the middle band and away from that corner. One line works best: what you make, what you are building, or the one thing you want a visitor to remember. Pin a post that expands on it. [X header size](https://gradiently.design/guide/x-header-size) has the safe areas in detail.

An X header at 1500 by 500 with the line Small tools for big spreadsheets on a gradient background

One line, placed centre right, on the same background the account uses for every post image.

Treat the pinned post as the second half of the header. A visitor reads the line in the header, glances at the bio, then sees the pinned post directly underneath. Make that post the best short introduction to what you do, with an image in the same look, and refresh it when you have something better to show. A few that work well:

- **A one image introduction:** who you are, what you make, what to expect if they follow.
- **Your best thread,** with a numbered cover image so it reads as a series.
- **A current launch or offer,** replaced as soon as it ends so it never goes stale.

## Post images that look like yours

Most posts on X are words, and they should stay that way. Add an image when it does a job: frames a key line, shows a result, announces something, or carries a chart. When you do, use a small set of layouts on one background family so people learn to recognise them mid scroll.

A landscape X post image announcing three times faster imports in version 2.4 on a gradient background

A landscape update card at 1600×900. One number, one line of context.

A portrait X post image with the quote Ship the boring version first on the same gradient background

A portrait quote card at 1080×1350, which takes up more of a phone screen.

Keep the type large: people read X on phones, and the timeline shows images smaller than you designed them. Two or three words per line, one idea per image. [X post image design](https://gradiently.design/guide/x-post-image-design) and [X thread graphics](https://gradiently.design/guide/x-thread-graphics) have more layouts, including numbered images for long threads.

## Link cards are part of your brand

Every time anyone shares your website on X, the card that appears comes from your page's meta tags. Without them, X shows a plain link or a random crop. With a 1200×630 image in your brand look, every share, including ones you never see, carries your look into the timeline. X reads its own `twitter:` tags first and falls back to Open Graph.

```html
<meta name="twitter:card" content="summary_large_image">
<meta property="og:title" content="Small tools for big spreadsheets">
<meta property="og:description" content="Import, clean and merge files in seconds.">
<meta property="og:image" content="https://example.com/og/home.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
```

The minimum for a large image card. Use an absolute https address for the image, and a different image per important page.

Design the link image like a tiny poster: page title, a short line, your brand background, generous margins because X rounds the corners. [Open Graph image size](https://gradiently.design/guide/open-graph-image-size) covers testing and caching.

## Twitter branding mistakes to avoid

### Avoid

- A detailed logo as the avatar
- A header crowded with a slogan, handle and website
- Words in the header's lower left corner
- Screenshots with tiny text as post images
- Leaving link cards to chance

### Do

- A simple symbol or portrait, kept for years
- One clear line on a brand background
- Text centred or right of centre
- Large type, two or three words per line
- A designed 1200×630 card for every key page

The simplest way to keep all five pieces in step is to make them from one design. In Gradiently you can design once on a Mark and, with Pro, resize to every format in one step, so the header, post cards and link image share the same light and colour. The Mark makes room for your words at every size, which matters on a 3:1 strip where there is very little room. For the multi platform view, read [consistent branding across social media](https://gradiently.design/guide/brand-consistency-across-platforms).

## FAQ

### What size is the X (Twitter) header?

1500×500 pixels, a 3:1 ratio. Keep words in the middle band and away from the lower left, where the avatar sits.

### What size should images be for posts on X?

1600×900 for landscape or 1080×1350 for portrait. Portrait images take up more space on phones.

### Should my X avatar be a logo or a photo?

Use whichever reads clearly as a tiny circle: a simple symbol, a monogram or a tight portrait. Avoid detailed logos and small text.

### How do I control the image when my website is shared on X?

Add a `twitter:card` tag set to `summary_large_image` and an Open Graph image of 1200×630 pixels to each page's head.

### How can I make my X profile look more professional?

Use the same simple avatar everywhere, a header with one clear line, and post images that share one background family and typeface.
