Social Share and Favicon Image Sizes: Open Graph, X Cards, Favicons and Touch Icons

Two kinds of small image decide how your site looks outside your own pages: the share image that appears when someone posts your link, and the favicon in browser tabs, bookmarks, phone home screens and Google results. This sheet gives the sizes and tags that work, the minimal favicon set that current browsers need, and the tools to test and refresh each. For step by step fixes when a share preview is wrong, see wrong image when sharing a link.

Read this first: platforms change their requirements without much notice. Figures below come from each platform’s developer documentation where it could be checked; where a cell says there is no single published figure, check the platform’s current documentation before you rely on it.

The one-line answer

Need	Make this
A share image that works almost everywhere	1200 x 630 pixels, JPEG or PNG, under about 1 MB, important content kept away from the edges.
A favicon set for current browsers and phones	favicon.ico (32 x 32), icon.svg, apple-touch-icon.png (180 x 180), and a web app manifest with 192 x 192 and 512 x 512 PNG icons.
On WordPress	Upload a square image of at least 512 x 512 as the Site Icon (Settings > General since WordPress 6.5; Appearance > Customize > Site Identity before that) and set a default share image in your SEO plugin.

Share images by platform

Platform	Recommended size	Minimum	Ratio	Max file size	Notes
Facebook (and Meta link previews)	1200 x 630	600 x 315 for the large preview; smaller images show as a small thumbnail	About 1.91:1	8 MB	Reads og:image. Add og:image:width and og:image:height so the first share renders immediately.
LinkedIn	1200 x 627	1200 x 627 (LinkedIn’s stated minimum)	1.91:1	5 MB	Reads Open Graph. First fetch cached for about 7 days unless refreshed in Post Inspector.
X, summary_large_image card	1200 x 600 (2:1)	300 x 157	2:1	5 MB	Maximum 4096 x 4096. JPG, PNG, WEBP, GIF (first frame only). Falls back to og:image if twitter:image is missing.
X, summary card	Square	144 x 144	1:1	5 MB	Small thumbnail beside the text.
WhatsApp, Slack, Discord, Teams, iMessage	1200 x 630 works	No single published figure	Varies; some crop to a square	No single published figure; smaller files load more reliably	All read Open Graph tags. No public refresh tools; a new URL (query string) forces a fresh fetch.

Safe area: a 1200 x 630 image cropped to 2:1 for X loses a strip top and bottom, and square crops lose the sides. Keep logos, faces and text inside the central area, roughly the middle 630 x 630 if square crops matter to you.

Formats: JPEG for photos, PNG for graphics with text. Do not use SVG for share images; social platforms do not display it. WebP is accepted by X; check other platforms before relying on it.

The Open Graph and X tags

Tag	Required?	Example value	Notes
og:title	Yes (basic property)	Spring Menu at Example Cafe	Can differ from the SEO title.
og:type	Yes (basic property)	website for the home page, article for posts	SEO plugins set this for you.
og:image	Yes (basic property)	https://example.com/wp-content/uploads/share.jpg	Absolute https URL. Exactly one per page unless you mean to offer several.
og:url	Yes (basic property)	https://example.com/spring-menu/	The canonical URL of the page.
og:description	Optional	Five new dishes, available from March.	One or two sentences.
og:image:width, og:image:height	Optional	1200, 630	Must follow the og:image they describe.
og:image:alt	Optional, recommended	A table of spring dishes	Describes the image for screen reader users.
og:site_name, og:locale	Optional	Example Cafe, en_GB	Useful on multilingual sites.
twitter:card	Needed for X cards	summary_large_image	Without it, X may show a small card or none.
twitter:title, twitter:description, twitter:image	Optional	As above	X falls back to the matching og: tags.
twitter:image:alt	Optional	A table of spring dishes	Alt text for the card image.

Copy-ready block (most SEO plugins output this for you; add by hand only if nothing does):

<meta property="og:title" content="Spring Menu at Example Cafe">
<meta property="og:description" content="Five new dishes, available from March.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/spring-menu/">
<meta property="og:image" content="https://example.com/wp-content/uploads/spring-share.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A table of spring dishes">
<meta name="twitter:card" content="summary_large_image">

Open Graph tags use property=; X tags use name=. Both go in the <head>.

Who outputs these tags on WordPress

Source	What to check
SEO plugins (Yoast SEO, Rank Math, All in One SEO, SEOPress, The SEO Framework and others)	Social or Open Graph settings: default image, per-post social image, X card type. Usually the best single source.
Jetpack	Outputs Open Graph tags itself unless it detects a known SEO plugin. Check for duplicates.
Social sharing plugins	Many have an “add Open Graph tags” option. Turn it off if your SEO plugin handles them.
Themes and page builders	Some add social meta in theme options or an integrations panel. Turn it off if another source already outputs tags.

Rule: exactly one source. Check with curl -sL https://example.com/ | grep -ciE 'property="og:image"' on your computer: -c counts matching lines, so the answer should be 1 (or the number of images you deliberately listed). If tags are minified onto one line, view the page source and search instead.

Usual fallback order in SEO plugins: per-post social image, then featured image, then site-wide default image.

The modern favicon set

Older guides list a dozen or more icon sizes. Current browsers need only a handful of files, because they scale icons and read the rest from the web app manifest.

File	Size	Used for
/favicon.ico	32 x 32 (can also contain 16 x 16)	Browsers and tools that request /favicon.ico directly, older browsers, RSS readers. Keep it at the site root even if you link other icons.
/icon.svg	Any (vector)	Modern browser tabs at any size and pixel density. Can include a dark mode variant with a prefers-color-scheme media query inside the SVG.
/apple-touch-icon.png	180 x 180	iPhone and iPad home screen bookmarks. Use a solid background; transparency shows as black.
/icon-192.png	192 x 192	Android home screen, listed in the manifest.
/icon-512.png	512 x 512	Android splash screen and app install, listed in the manifest.
/icon-mask.png (optional)	512 x 512	A “maskable” icon with the logo inside the central safe zone, so Android can crop it to circles or squircles without cutting the logo.

HTML for the <head>:

<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">

Manifest file (manifest.webmanifest):

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

Design tip: a favicon is drawn at 16 to 32 pixels in a tab. A full logo with words becomes a smudge. Use a simplified mark, initial or symbol, with strong contrast that works on both light and dark browser themes.

Favicons on WordPress

Question	Answer
Where do I set it?	Settings > General > Site Icon (WordPress 6.5 and later), or Appearance > Customize > Site Identity on older versions and many classic themes.
What image?	Square, at least 512 x 512 pixels, PNG or JPEG.
What does WordPress output?	Icon links at 32 x 32 and 192 x 192, an apple-touch-icon at 180 x 180, and a 270 x 270 tile image for Windows, all generated from your upload.
Does it make /favicon.ico?	Not as a real file. Recent WordPress versions answer a request for /favicon.ico by redirecting to the Site Icon when there is no physical file (or to a WordPress logo if no Site Icon is set). A physical favicon.ico in the site root takes priority, so delete or replace an old one left by a previous theme.
Theme or plugin also adds icons?	Some themes, builders and favicon plugins add their own links. Two sets of icon links confuse browsers; keep one source.

Favicon in Google search results

Rule (from Google Search Central)	What to do
Declared with a <link rel="icon"> on the home page	WordPress Site Icon does this. Make sure the home page is crawlable.
Square (1:1 aspect ratio)	No wide logos.
Size	Use 48 x 48 pixels or larger. A multiple of 48 (48, 96, 144) satisfies both the older and current wording of Google’s guidance; SVG also works.
Both the icon file and the home page crawlable by Google	Do not block /wp-content/uploads/ or the icon path in robots.txt.
One favicon per site (per host name)	Subdomains can have their own.
Changes are not instant	Google picks up a new favicon when it recrawls the home page; it can take days to weeks. Requesting indexing of the home page in Search Console can help.

Test and refresh tools

Tool	Where	What it does	Refresh
Facebook Sharing Debugger	developers.facebook.com/tools/debug/ (log in to Facebook)	Shows the preview, all og: tags found, warnings, time last scraped	Scrape Again
LinkedIn Post Inspector	linkedin.com/post-inspector/ (log in to LinkedIn)	Shows LinkedIn’s preview and the properties used	Inspecting the URL fetches it fresh
X	Post composer	The old Card Validator no longer shows previews; paste the link into a new post to see the card	No manual refresh; add a query string such as ?v=2 for a new share
Browser tab favicon	Your browser	Browsers cache favicons stubbornly	Open https://example.com/favicon.ico directly, hard reload, or test in a private window
Image headers	Your computer: curl -sI https://example.com/share.jpg	-I fetches headers only. Look for 200, content-type: image/... and a sensible content-length	Not applicable
Crawler blocked?	Your computer: curl -sI -A "facebookexternalhit/1.1" URL and -A "LinkedInBot/1.0"	-A sends the crawler’s user agent. A 403 points to a firewall rule; real crawlers come from the platform’s own IPs, so this is only a hint	Not applicable

Common mistakes

Mistake	Result	Fix
Replacing the share image with a new file of the same name	Old image keeps appearing from caches	Upload under a new file name and rescrape
Relative og:image URL	No image	Use the full https:// address
Two plugins outputting og: tags	Random or wrong image	Keep one source
Share image smaller than 600 x 315	Small thumbnail instead of a wide card on Facebook	Use 1200 x 630
Staging or old domain in tags after a migration	Broken image, or the old site’s picture	Search and replace the old domain; rescrape
Hotlink protection or a WAF blocking bots	“invalid content type” or no image	Allow facebookexternalhit, LinkedInBot and Twitterbot to fetch images
Transparent apple-touch-icon	Black background on iPhone home screen	Use a solid background color
Old favicon.ico left in the site root	Old icon in some browsers and tools	Replace or delete it
Full wordmark used as favicon	Unreadable smudge in tabs	Use a simple symbol or initial

Related: new website not showing on Google for getting the home page (and its favicon) crawled, changes not showing for clearing your own caches, and the pre-launch checklist.