Social media kit generator

The one image every web app needs first

Before Instagram, before X: the Open Graph image. It is what appears when anyone pastes your install link into a chat, a post or a Slack channel. Without it, the preview is a grey box and the link looks untrustworthy. Make it 1200×630, put the app icon and one line on it, and add to your install page's head:

<meta property="og:image" content="https://yoursite.com/og/install.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">

Sizes that are current

What a web app launch post should say

People have a mental model of "get the app" that involves a store. A web app's launch message has to correct that in one line, because it is also the advantage. Patterns that work on a graphic:

• "Now installable — straight from the site, no app store."
• "Add it to your home screen. Works offline."
• "The app is the website. It just got a home-screen icon."

Pair the graphic with the QR code for anything that will be seen on a screen other than the phone — presentations, shop displays, the desktop version of your site.

Consistency

Use the same gradient and icon placement across every size so the set is recognisably one campaign. Pull the colours from the palette extractor and reuse the headline from the feature graphic. Text can be shorter on the small formats; the icon should not shrink below about a fifth of the width.