RenderPixels
PricingBlogSign inStart free

Blog

The images your website needs before launch (with sizes)

A launch checklist for favicons, logos, Open Graph images, social posts, Product Hunt, store tiles and more, with each platform's official size and a prompt you can hand to your AI assistant.

Vivian Guillen
The images your website needs before launch, beside rounded shapes in the proportions of favicons, banners and social images.

A launch needs more images than you'd expect. You make a favicon and an Open Graph image, then Product Hunt asks for a thumbnail, Google's consent screen wants a 120 px logo, and Stripe wants an icon for its emails.

I went through every platform a launch touches and wrote down the images each one asks for. The sizes come from each platform's own docs, checked in November 2026, and I point out where those docs stay vague. Each section ends with a prompt you can copy into Claude, ChatGPT or any AI assistant connected to RenderPixels.

The checklist

Tick these off as you go:

The essentials

0 of 6

The socials

0 of 7

The niche

0 of 6

0 of 19 done

The essentials

Your site needs these whether or not you plan a big launch. Browsers, link previews and your own emails use them from the first visit.

Favicon

Browsers and phones look for a handful of files, and you'll want all of them:

  • favicon.ico for browser tabs and bookmarks. Put the 16 and 32 px versions inside it.
  • apple-touch-icon.png at 180 × 180, for iPhones and iPads that save your site to the home screen. Apple's guide asks for a PNG in your site's root folder.
  • icon-192.png and icon-512.png, listed in your web app manifest. Chrome asks for both sizes.
  • A maskable icon at 512 × 512. Some platforms crop it into a circle or another shape, so keep your mark inside the middle 80%. web.dev defines the safe zone as a circle with a radius of 40% of the icon's width.

Google Search shows your favicon next to your results. Its docs ask for a square image of at least 8 × 8 px and recommend going bigger than 48 × 48. Google accepts ICO, PNG, JPEG and a few older formats, and SVG isn't on that list.

You can add a favicon.svg on top. Chrome and Edge have supported SVG favicons since version 80, and Safari added them in version 26, so keep the ICO as your fallback.

RenderPixels ships its own set: a favicon.ico with 16 and 32 px versions, a favicon.svg, the 180 px Apple icon, the 192 and 512 px PNGs, a maskable 512 and a site.webmanifest.

RenderPixels' own icons: the favicon in a browser tab, favicon.ico at 16 and 32 px, the Apple touch icon, the 512 px manifest icon and the maskable icon cropped to a circle.

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Ask your AI assistant

Make a favicon and app icon set for my site with RenderPixels. Use the icon preset: one 512×512 design with my logo mark centered on a solid background, kept inside the middle 80% so the maskable crop doesn't cut it. Give me the files and the <head> tags.

RenderPixels turns that one design into favicon.ico (16, 32 and 48 px), apple-touch-icon.png, both manifest PNGs, the maskable icon, a site.webmanifest and the <head> tags. It won't make the SVG favicon, because it renders raster images.

Your main logo should be an SVG. It stays sharp at any size, and you can recolor it with CSS for dark mode. A designer or a vector tool should make this one. RenderPixels outputs PNG, JPEG and WebP, so it can't hand you a real SVG.

You'll still need PNG copies for the places that won't take SVG: email, Stripe, Google's consent screen, social profiles and directory listings. Make one on a transparent background for light surfaces and one for dark surfaces, at twice the size you expect to display.

The RenderPixels logo as transparent PNGs: dark text on a light background and light text on a dark background.

Ask your AI assistant

Render my logo as a transparent PNG with RenderPixels: a 1040×240 canvas at scale 1 and 2, with the mark on the left and the name in my brand font. Make a second version with light text for dark backgrounds.

Open Graph image

The Open Graph image is the picture people see when they share your link on Facebook, LinkedIn, Slack or iMessage. Meta asks for at least 1200 × 630 px for high-resolution screens, an aspect ratio close to 1.91:1, and files under 8 MB. LinkedIn's minimum for link previews is 1200 × 627 px, with a 5 MB limit. A 1200 × 630 PNG meets both.

X has taken its Cards docs offline, so I can't point you to an official X size for link previews. On RenderPixels I set og:image to a 1200 × 630 image and twitter:image to a separate 1600 × 900 version.

RenderPixels' homepage Open Graph image: "Pixel-exact images, straight from Claude." beside a grid of red and grey tiles.

<meta property="og:image" content="https://example.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Your product name and tagline">
<meta name="twitter:card" content="summary_large_image">

Keep the text large and away from the edges, so it still reads when an app shows your preview at thumbnail size.

Ask your AI assistant

Make an Open Graph image for my homepage with RenderPixels, using the og preset (1200×630) and my brand kit. Put my product name and tagline on the left in large type, and a simple visual of the product on the right. Keep all text 60px from the edges.

Use a PNG logo in your emails. Gmail turns SVG images into PNGs, and Outlook 2007 through 2016 on Windows doesn't show SVG at all, according to caniemail.com's latest tests. Make the PNG twice as wide as you display it, so it stays sharp on high-resolution screens.

A verification email with the RenderPixels PNG logo in its header.

Ask your AI assistant

Render my logo with RenderPixels as a PNG for email headers: a 400×100 design at scale 2, on my email's background color.

The socials

These are the images people see on your X, LinkedIn and Bluesky profiles, in your launch posts and on Product Hunt.

X, LinkedIn and Bluesky profiles

Set up your profiles before launch day, since that's when people click through to them.

  • X: profile photo 400 × 400 and header 1500 × 500, as JPEG, GIF or PNG under 2 MB. X can crop 60 px off the top and bottom of the header, so keep text in the middle.
  • LinkedIn company page: logo at 400 × 400 (268 × 268 minimum) and cover at 1512 × 256, PNG or JPEG under 3 MB. Older guides still say 1128 × 191, but LinkedIn's help page now says 1512 × 256.
  • LinkedIn personal profile: background image at 1584 × 396.
  • Bluesky: a banner in a 3:1 ratio, PNG or JPEG under 1 MB. Bluesky doesn't publish a pixel size, but its app crops banners to 3:1 and scales them to 2,000 px wide at most, so the 1500 × 500 X header works here too.

An X profile with the RenderPixels header and round avatar, a Bluesky profile with the same banner, and a LinkedIn company cover with the same tagline.

Ask your AI assistant

Make social profile images with RenderPixels and my brand kit: a 400×400 avatar with my logo mark, a 1500×500 header for X and Bluesky, and a LinkedIn company cover at 1512×256. Keep the header text away from the top and bottom 60px.

X and LinkedIn launch posts

You'll announce the launch on social media, so make an image for each network instead of reusing the OG image.

X doesn't publish a pixel size for post images anymore. Its help center says single images with ratios between 2:1 and 3:4 display in full. 1600 × 900 is 16:9, which sits inside that range.

LinkedIn asks for photos at least 552 × 276 px, recommends 1080 px wide, and accepts ratios from 3:1 to 4:5. A 1080 × 1350 portrait (4:5) is the tallest it allows, and a 1080 × 1080 square works too.

RenderPixels' launch image for X at 1600 × 900: "Pixel-exact images, straight from your AI assistant" beside a grid of red and grey tiles.

A RenderPixels launch image for LinkedIn at 1080 × 1350: "Ask your AI assistant for the image. Get the files."

Ask your AI assistant

Make launch announcement images with RenderPixels using my brand kit: one with the x preset (1600×900) and one with the linkedin_portrait preset (1080×1350). Headline: "[Product] is live". Add one line on what it does and my logo.

Product Hunt's launch guide asks for two kinds of images:

  • Thumbnail: a square, 240 × 240 recommended. GIFs work, but they animate on hover, so make the first frame count.
  • Gallery: 1270 × 760 recommended, and you need at least two images. You can drag them into any order after uploading.

Every image has to stay under 3 MB. Lead the gallery with your product doing its job, and put feature lists and pricing after it.

A Product Hunt thumbnail with the RenderPixels mark, beside a gallery image where a chat asks for an Open Graph image and gets back this post's cover.

Ask your AI assistant

Make Product Hunt images for my launch with RenderPixels and my brand kit: a 240×240 thumbnail with my logo mark, and three gallery images at 1270×760. Gallery 1 shows the product in use, gallery 2 lists the main features, gallery 3 shows pricing.

The niche

You need these only if they match how you ship: a browser extension, an iPhone or iPad app, a public repo, Google sign-in, Stripe payments or a demo video.

Chrome Web Store tiles

Skip this one unless you ship a browser extension. If you do, Chrome's docs ask for:

  • A 128 × 128 PNG icon, with the artwork at 96 × 96 and 16 px of transparent padding on each side.
  • A small promo tile at 440 × 280. Extensions without one show up after the extensions that have one.
  • An optional marquee tile at 1400 × 560.
  • One to five screenshots at 1280 × 800 or 640 × 400. The store downscales them all to 640 × 400.

A Chrome Web Store small promo tile and marquee in the RenderPixels style: "Images from your AI assistant" beside red and grey tiles.

Ask your AI assistant

Make Chrome Web Store images with RenderPixels and my brand kit: a small promo tile at 440×280 and a marquee at 1400×560, with my extension's name and one line on what it does.

App Store icon and screenshots

If you ship an iPhone or iPad app, Apple asks for two kinds of images:

  • App icon: a 1024 × 1024 square. Leave the corners square, because iOS, iPadOS and macOS round them for you. Apple's guidelines say icons that arrive already masked end up with jagged edges.
  • Screenshots: at least one and up to 10 per device size, as PNG or JPEG with no transparency. The largest iPhone size Apple lists is 1320 × 2868 in portrait, and App Store Connect scales your screenshots down for smaller iPhones when your app looks the same on each. iPad apps also need a 13-inch iPad screenshot at 2064 × 2752.

An App Store icon with the RenderPixels mark on red, beside three iPhone screenshots: "Ask for an image", "Get every size" and "Use your brand".

Ask your AI assistant

Make App Store images with RenderPixels and my brand kit: a 1024×1024 app icon with my logo mark on a solid background and square corners, and three iPhone screenshots at 1320×2868, each with a short headline above a picture of the app.

GitHub social preview

If your project has a public repo, set a social preview in the repo's settings. GitHub recommends 1280 × 640 for the best display and at least 640 × 320, as a PNG, JPG or GIF under 1 MB. It supports transparent PNGs, but recommends a solid background.

A GitHub social preview in the RenderPixels style: "Render Tailwind and HTML into images over MCP".

Ask your AI assistant

Make a GitHub social preview at 1280×640 with RenderPixels and my brand kit: the repo name, a one-line description and my logo, on a solid background.

Google and Stripe icons

Both show up when someone is about to trust you with an account or a payment, and both are easy to forget.

  • Google OAuth consent screen: a square logo, 120 × 120 for the best display, JPG, PNG or BMP under 1 MB. Google shows it after your app passes brand verification, so start that before launch day.
  • Stripe: an icon (square) and an optional logo (not square), JPG or PNG, under 512 KB and at least 128 × 128. Stripe's emails use the icon and never the logo.

The RenderPixels mark on a red square, shown at the sizes for Google's consent screen and Stripe's icon.

Ask your AI assistant

Render my logo mark with RenderPixels on a solid brand-color square: a 512×512 design saved at 120×120 for Google's consent screen, and a 512×512 PNG for Stripe's icon.

YouTube thumbnail

If you record a demo video, give it a custom thumbnail. YouTube now recommends 3840 × 2160 at 16:9, with a minimum width of 640 px, as JPG or PNG. The upload limit is 2 MB from mobile and 50 MB from a desktop browser. Older guides say 1280 × 720, and YouTube still accepts it.

RenderPixels has a youtube preset at 1280 × 720, and custom sizes go up to 4000 px per side, so you can ask for the full 3840 × 2160.

A YouTube thumbnail for a RenderPixels demo: "A favicon set in one prompt" beside the app icons.

Ask your AI assistant

Make a YouTube thumbnail for my product demo with RenderPixels at 3840×2160 using my brand kit. Big headline with what the demo shows, my logo in a corner, and high contrast so it reads at small sizes.