GitHub social preview

Laying out the card…
Size1280 × 640
ThemeDark
Weight
Limit0% used

GitHub Social Preview Generator

The image GitHub shows when your repository is linked anywhere else — a tweet, a Slack channel, a newsletter. Left unset, the link unfurls as a generic grey card with an octocat on it, which is the difference between a project that looks maintained and one that does not. GitHub rejects anything over a megabyte outright, so the file size is shown against that limit while you are still designing.

The size GitHub asks for
1280×640
Hard upload limit
1 MB
Language colours
15
Bytes uploaded
0

Step by step

How to use it

  1. 01Fill in the repository

    Owner, name, and the repository's own description. Using the real description rather than a marketing line keeps the card and the repository page saying the same thing.

  2. 02Set the language

    The coloured dot beside a repository is the most recognisable thing on GitHub. These are the real linguist colours, so a reader identifies the card as a repository before reading a word of it.

  3. 03Decide about the counts

    Star and fork numbers make a card look alive, and they are wrong the week after you upload it. Leave them off for anything you will not revisit.

  4. 04Watch the megabyte

    The bar shows the encoded size against GitHub's hard limit. A gradient card as PNG can pass it; the same card as JPEG rarely comes close, and no viewer can tell the difference at feed size.

Worked example

Why a card gets rejected, and what fixes it

GitHub refuses an upload above 1 MB and does not say by how much. The cause is almost always the format rather than the design.

Given

Card
1280 × 640
Background
a two-colour gradient
Variable
encoding

The same card, encoded two ways

PNG    lossless        every gradient step stored exactly
JPEG   quality 0.9     tonal change is what JPEG is built for

A gradient is the worst case for PNG and the best case for
JPEG, so the gap between them is at its widest here.
Gradient background
JPEG
Flat background
Either
Screenshot or photo
JPEG

PNG stores a gradient as thousands of distinct values it is not allowed to approximate, which is exactly what it is worst at. JPEG approximates smooth tonal change by design, and at quality 0.9 the loss is invisible at any size a link preview is drawn. Reach for PNG only when the background is flat colour, where the gap narrows and the crisper type is worth having.

Before you upload it

What to know about GitHub social previews

The default is a grey card with an octocat

A repository with no social preview set unfurls as a generic placeholder wherever it is shared. It is the single cheapest signal that a project is maintained, and it is set once and never touched again.

1280 × 640, and it is the same 1.91:1 as everywhere else

GitHub asks for 1280 × 640 for high-resolution displays, and accepts down to 640 × 320 at the same ratio. Because the shape matches the Open Graph standard, the card also works when the link is pasted into Slack or a chat.

One megabyte is a hard limit

GitHub rejects a larger file rather than compressing it, and the error does not tell you the size. This is the most common reason a carefully made preview never gets uploaded, and switching format almost always fixes it.

Keep the content in the middle

The centre 1000 × 500 is what survives everywhere the card is reused. GitHub itself shows the whole image, but the same file pasted into a chat client is subject to that client's crop.

Star counts go stale

A number baked into an image is a claim frozen on the day you exported it. On a repository that is still growing, an old count reads worse than none at all — which is why the counts here are optional rather than assumed.

The repository name has to survive a small preview

The card is authored at 1280 pixels and drawn at a fraction of that in a timeline. The name is the one element that must stay readable at the narrow end, which puts the practical floor around 64 pixels as authored.

The judgement call

What belongs on the card?

A social preview is read in about a second. Each element has to earn its place.

  • The repository name

    Always

    It is the one thing a reader needs, and it should be the largest element by a clear margin.

  • The one-line description

    Always

    Two clamped lines answer 'what is this' before anyone clicks. Reuse the repository's own description.

  • The language dot

    Usually

    It identifies the card as a repository instantly, and tells a developer whether it is relevant to them.

  • Star and fork counts

    Only if you will update it

    They date. A stale count on a growing project reads worse than showing nothing.

  • The owner avatar

    For an organisation

    A recognised logo adds trust. A personal avatar mostly adds noise at preview size.

  • A screenshot of the project

    Rarely

    UI detail is illegible at the size a preview is drawn, and it pushes the file toward the 1 MB limit.

Reference

The numbers behind the card

Recommended size
1280 × 640GitHub's own recommendation, sized for high-resolution displays. The minimum is 640 × 320 at the same ratio.
Aspect
1.91:1The same shape as an Open Graph image, so one card works both on GitHub and when the link is pasted elsewhere.
File limit
1 MB, enforcedLarger uploads are rejected outright rather than compressed, and the error message does not name the size.
Formats
PNG or JPEGJPEG is usually the right answer for a gradient background; PNG for flat colour and hard-edged type.
Safe area
1000 × 500 centredGitHub shows the whole image. The margin matters when the same file is reused as an Open Graph image elsewhere.
Language colours
GitHub's linguist paletteThe real hex values, not approximations — an off-by-a-shade dot is obvious to anyone who reads GitHub daily.

FAQ

Questions, answered plainly

What size should a GitHub social preview image be?

1280 × 640 pixels, which is the size GitHub recommends for high-resolution displays. The ratio is 1.91:1 and images down to 640 × 320 are accepted at that same shape. The file must be a PNG or JPEG under 1 MB — GitHub rejects anything larger rather than compressing it.

Where do I upload a social preview image on GitHub?

Open the repository's Settings tab and scroll to the 'Social preview' section, roughly a third of the way down the General page, then use Edit to upload the image. It applies to that repository only, so each one needs its own — the card is shown wherever the repository link is unfurled.

Why is GitHub rejecting my social preview image?

Almost always because it is over the 1 MB limit, which GitHub enforces without telling you the file's size. A card with a gradient background encoded as PNG is the usual culprit; re-encoding the same design as JPEG typically brings it far under the limit with no visible difference at preview size.

Should I put star counts on a GitHub social preview?

Only if you will re-export the card as the numbers change. A star count baked into an image is frozen on the day it was made, and a stale figure on a growing project reads worse than showing no numbers at all. For a repository you will not revisit, leave the counts off.

Does a GitHub social preview also work as an Open Graph image?

Yes. GitHub's 1280 × 640 is the same 1.91:1 shape as the Open Graph standard, so the same file unfurls correctly in Slack, Discord, X and iMessage. Keep the important content within the centre 1000 × 500 so it survives the slightly different crops those clients apply.

Does this generator send my repository details to GitHub?

No. The Tinapps GitHub social preview generator lays the card out with satori in your browser and never contacts GitHub or any other service — the owner, repository name and description stay on your machine, which matters when the repository is still private.

The card is laid out and encoded entirely in your browser. The repository name, description, and any avatar you add are never uploaded — not to GitHub, and not here.

All design toolsTinapps homeFree · no account · nothing leaves your browser