Skip to content
Start free

Set social sharing previews and a favicon

Control how your pages look when shared in messaging apps and social networks, and how your brand appears in browser tabs and search results.

Beginner 15 minutes By WebGrowthEngine team · Updated Oct 14, 2026

The problem

Pages have no Open Graph title or image, or the site declares no favicon.

How to spot it

  • Shared links show a blank or random image.
  • Browser tabs show a generic icon.

Why it matters

A good preview makes shared links look trustworthy and clickable. Favicons appear in browser tabs and search results and make your brand recognisable.

What happens if you leave it

Fewer clicks on shared links and a less professional appearance.

How to fix it

  1. Add Open Graph tags to each important page:

    <meta property="og:title" content="Emergency plumbers in Dhaka">
<meta property="og:description" content="24/7 call-outs with fixed upfront prices.">
<meta property="og:image" content="https://www.example.com/og/home.jpg">
<meta property="og:url" content="https://www.example.com/">

    Use an image of at least 1200×630 pixels.

  2. Add a favicon (SVG or a 48×48 PNG or larger) and declare it:

    <link rel="icon" href="/favicon.svg" type="image/svg+xml">

Common mistakes

  • Relative image URLs in og:image. Use absolute URLs.

How to check the fix worked

Paste the URL into a messaging app or a social platform's sharing debugger to preview the card. Re-run the audit.

References and further reading

Related tutorials

Give visitors a clear next step: CTAs, navigation and breadcrumbs

Make it obvious what visitors should do next, and how to find their way around, from the homepage down to deep...

Was this guide helpful?

Are you sure?