search

Found

info Overview

Build a GitHub Open Graph card with owner/repo plus a tagline and language tag — 1280x640 PNG, Dark / Light / Accent themes, accent-color picker.

📘 How to Use

  1. Type the repo name (owner/repo) and the one-line description into the form
  2. Add a language tag and pick a theme (Dark, Light, or Accent)
  3. Choose an accent color with the color picker, then click the Download button

GitHub Social Preview Card

Article

GitHub Social Preview Card Maker | Export a 1280x640 Open Graph image

Enter an owner/repo string, a one-line description, and a language tag like TypeScript, Rust, or Go, and the tool composes the PNG that GitHub recommends for repository Social preview slots. Three themes (Dark, Light, Accent) and a color picker for the accent let you land on a finished card without opening Figma or Photoshop.

💡 About this tool

When someone drops your repo URL into a tweet, a Slack channel, a Discord thread, or a Hacker News comment, the unfurled card is the first impression. With no Social preview set, GitHub falls back to a generic card with just the repo name and the README excerpt; with a custom image, you get a wide, readable card that says what the project is at a glance.

The friction is the design step. You have to remember the recommended dimensions, open a vector editor, lay out a name, a tagline, and maybe a language chip, then export at the right size. This tool removes that loop. You type four things, the Canvas draws a 1280x640 image on the page, and you save the PNG. Three themes cover the obvious choices: a dark card for terminal-oriented projects, a light card for libraries that lean clean, and a fully tinted accent card when you want the repo to pop in a feed.

🧐 Frequently Asked Questions

Q. What dimensions does the exported PNG use? A. 1280 by 640 pixels. The GitHub Docs recommend at least 640 by 320 and 1280 by 640 for the best display quality, so the tool standardizes on the larger figure.

Q. The preview area on the page looks smaller than 1280x640. Is that a problem? A. The preview is scaled down to 480 by 240 just for layout. The exported PNG is the full 1280 by 640, so check the final framing on the downloaded file before uploading it.

Q. How long can the repo name and description be? A. Up to 50 characters for the repo name, 80 for the description, and 20 for the language tag. The repo name auto-shrinks if it is long, but descriptions over 80 characters get truncated, so keep the tagline to a single sentence.

Q. Where does the accent color show up? A. In Dark and Light themes, it tints the small dot in the top-right corner and the background of the language-tag chip. In the Accent theme, it becomes the full background color of the card.

Q. Can it export a transparent PNG? A. The exported PNG is rendered with the theme background filled in, so the background is solid. GitHub does accept transparent PNGs for Social preview, but a filled background generally reads more reliably across X, Slack, and Discord in both light and dark modes.

Q. What formats does it output? A. PNG only. GitHub Social preview accepts PNG, JPG, and GIF under 1 MB, so convert the PNG with a separate tool if you specifically need JPG.

📚 Why a Social preview matters for an open-source repo

The Social preview slot lives under Settings, Social preview on every GitHub repository. Repositories without a custom image fall back to a default text card, and that card is what people see when your link gets pasted into a Hacker News submission, a Reddit thread, an X post, or a freshly opened Slack channel. A card with the repo name in monospace, a short description in plain language, and a language chip in the corner gives readers enough context to decide whether to click through.

A few practical patterns are worth pointing out. First, the description on the card does a different job than the README opening paragraph: it has to fit on a single line at a small render size, so a verb-first phrase that names the kind of thing the repo is ("CLI for batch image resizing", "React hooks for keyboard shortcuts") tends to work better than a marketing line. Second, the language tag is genuinely informative. Many people scrolling a feed will read the language before they read the description, so showing Rust, TypeScript, or Go up front helps the right readers self-select. Third, picking one accent color and reusing it across your repos turns a scattered set of side projects into something that looks like a family, which matters more for personal portfolios than the time investment suggests.