Reference

Website Image Tags

Image tags and sizes used for link previews, favicons, and app icons. Platforms change these limits without much notice, and some are not officially documented; these were last checked in November 2026. Values marked with * are from memory or third-party sources, and other values may also rely on secondary sources.

Recommended

This set covers link previews, browser tabs, search results, and home screens on current platforms:

<meta property="og:image" content="https://example.com/preview.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Description of the image">
<meta name="twitter:card" content="summary_large_image">

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

The icons section of manifest.webmanifest is below; web app install also needs name or short_name, start_url, and display:

{
  "icons": [
    {"src": "/icon-192.png", "type": "image/png", "sizes": "192x192"},
    {"src": "/icon-512.png", "type": "image/png", "sizes": "512x512"},
    {"src": "/icon-maskable-512.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable"}
  ]
}

The 1200x630 image suits pages with a designed preview image, and fills the width of a message in chat apps. If the only image is a logo or icon, use a 280x280 square image instead so it appears as a small thumbnail next to the title, set the og:image:width and og:image:height tags to match, and use twitter:card summary. Do not reuse the 512x512 app icon for previews, since WhatsApp will show it at full size.

• Use absolute https:// URLs for preview images
• Use PNG or JPEG for preview images, and keep important content centered in case of cropping
• Keep preview images under 600 KB, which is WhatsApp’s documented limit
• Serve favicon.ico from the site root, since some tools only look there
• Give the Apple touch icon an opaque background and square corners
• Keep the logo in a maskable icon inside a centered circle with a radius of 40% of the icon width
• sizes="32x32" reportedly stops Chrome from preferring the ICO over the SVG
• Change the filename when replacing an image, since platforms and browsers cache them aggressively

Exhaustive

Link Previews

X falls back to og:image when twitter:image is missing, but needs twitter:card to choose the card format.* X accepts JPG, PNG, WEBP, and GIF, and only uses the first frame of an animated GIF.*

Chat apps choose between a large preview and a small thumbnail using either the image’s dimensions or the page’s tags:

WhatsApp documents the requirements for a large preview, and says it may relax them or revert to small previews without giving a threshold, so a thumbnail under 300 pixels wide comes from the same report. Signal does not use a single width threshold, so a large square image may still appear as a thumbnail. Discord shows a small image beside the text by default, accepts PNG, GIF, JPEG, WEBP, and AVIF, and fetches the image to measure it unless og:image:width and og:image:height are set.

Preview Image Properties

Structured Data

Favicons

App Icons

Legacy

These are safe to skip on new sites:

Sources:

• The Open Graph Protocol
• Meta; Images in Link Shares
• LinkedIn; Make Your Website Shareable
• X; Summary Card with Large Image
• Discord; Link Previews
• Google; Favicon in Search Results
• Google; Article Structured Data
• Evil Martians; How to Favicon
• Can I Use; SVG Favicons
• Apple; Configuring Web Applications
• web.dev; Maskable Icons