GitHub social preview image size: 1280×640px

Check your social preview before you upload it

Drop in your image to check it against GitHub's limits, see it on light and dark backgrounds if it is transparent, and see the crops link cards apply. Over 1 MB? Shrink it here.

GitHub social preview image specs

With no custom image, GitHub generates a card for the repository at 1200 × 600 (read from the og:image tags on a repository page). Upload your own to replace it. GitHub serves a custom upload as is, without resizing it to 2:1, so an off-ratio image is cropped differently by every app that unfurls the link.

How to add or change it

• •1. Open the repository's Settings. You need permission to change the repository's settings.
• •2. Find Social preview. It is on the General settings page.
• •3. Click Edit, then Upload an image. Choose your 1280 × 640 file. Remove image puts the generated card back.
• •4. Re-scrape where it was already shared. X, LinkedIn, Slack and Facebook cache cards. LinkedIn's Post Inspector and Facebook's Sharing Debugger force a refresh; elsewhere, sharing the link with a query string such as ?v=2 gets a fresh card.

Where your preview gets cropped

Each app fits the image to its own card shape. The figures below are ratio arithmetic on a 1280 × 640 canvas, our reading rather than any app's documentation, and the preview above draws them for your own file.

• •Text-safe zone. Keep text inside roughly the centred 1160 × 560 and put the logo or repository name in the centre 640 × 640, so a square thumbnail still reads.

How X shows your repo link: card crop and domain label

GitHub marks repository pages with twitter:card summary_large_image, so X shows the image as a large card. X lays the domain over the lower-left corner of the image, so keep the repository name and logo out of the bottom-left quarter.

X reads twitter:image first and falls back to og:image; GitHub sets both to your upload. X retired the preview in its Card Validator, so the only way to see the card before posting is the post composer. X caches a card for about a week: after changing the image, share the link with a query string such as ?v=2 to get a fresh one.

How it looks in Slack

A Slack unfurl prints the site name, the title and the description as text above the image; nothing is laid over the picture itself. Do not repeat the repository name in the image just to label the card, since Slack already shows it.

Slack's crawler identifies itself as Slackbot-LinkExpanding and reads oEmbed first, then Twitter Card tags, then Open Graph tags; images in the page body are never used. Slack's help pages do not publish a pixel size, so 1280 × 640 is only GitHub's number.

• •No preview at all. Check that the og:image URL is absolute https and not behind a login or a bot challenge, that the message has no more than a handful of links, and that the reader has not turned off previews from linked websites in their Slack preferences. Workspace admins can also block previews for a domain.
• •Old image after an update. Slack caches unfurls and does not repeat one for a link shared recently in the same conversation. Share the URL with a query string such as ?v=2 to get a fresh preview.
• •Webhooks and bots. A message posted with unfurl_links set to false never unfurls, whatever the tags say.

How it looks in Discord

Discord's developer docs give text limits for embeds but no image pixel sizes: Discord sets the image's displayed width and height itself, and an app cannot. In practice it draws a link card much narrower than 1280 px, so text set below about 28 px on the canvas becomes hard to read.

A link preview uses the large image slot only when the page says twitter:card summary_large_image, which GitHub does. Pages without it get a small square thumbnail beside the text, centre cropped, which is why the logo belongs in the centre square. The theme-color meta tag colours the bar down the card's left edge.

• •Embed not showing or not updating. Make the og:image URL absolute, let Discord's crawler through any bot protection, and use PNG or JPG. Discord caches embeds, so share the link with ?v=2 to see a change.
• •Bots and webhooks. embed.image and embed.thumbnail take a URL or an attachment:// file. Their width and height fields are filled in by Discord; a bot cannot set them.

How it looks in iMessage

Apple's TN3156 asks for an image at least 900 px wide; images under 150 px wide may be ignored or shown as icons. A 1280 × 640 GitHub preview clears that comfortably. Messages also stops reading a page whose main HTML is over 1 MB, which a repository page never is.

Design checklist for a repository preview

• •Repository name at 64 px or larger. Cards are drawn at a fraction of 1280 px wide, so small type disappears first.
• •One line of tagline, no paragraphs. The title and description already come from the repository; the image only needs to be recognisable.
• •Logo in the centre square. It survives the 1.91:1 and square crops.
• •A solid background. A transparent PNG is shown on whatever background the app uses. Dark lettering on transparency goes black on black in dark mode.
• •Stay under 1 MB. Save photographic art as JPG at about 85% quality, or run a PNG through a quantizer. The preview above can shrink an oversized file to a 1280 × 640 JPG.

GitHub social preview vs og:image vs README banner

Free safe-zone template

Transparent PNG overlays with the zones from this guide: red is cropped on some screens, amber is covered by the app, and the dashed green box is where text belongs. In Canva or Figma, set the canvas to the same size, drop the PNG in as the top layer at about 30% opacity, and hide it before you export. No signup.

• Download 1280 × 640 PNG