Search code examples
htmldiscord

How do I show my favicon when I share my website on discord?

You know how in discord, when you share a link, sometimes the icon of the website shows up? How do I achieve a similar effect. For reference, this is what I'm trying to achieve:

enter image description here

See how there's an icon of google meet on the right side of the description? How do I achieve that effect? Should I add a new meta tag on my website?

Solution

  • To achieve this and showing your logo or image in an embed when posting your website on Discord, you can use the HTML meta tag with property. For the image you would use it like property="og:image" and description property="og:description". You can also set a title which is og:title.

    Example:

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta property="og:image" content="https://i.sstatic.net/AndBj.png?s=48&g=1"/>
  <meta property="og:description" content="StackOverflow" />
  <meta property="og:title" content="StackOverflow" />
</head>
<body>
  hello world
</body>
</html>

    Example of how it would look on Discord:

    enter image description here enter image description here