How do you make a picture display with the link when you share the link to Facebook , WhatsApp or other similar platform?

Question

Example is when you share a product from an online store to Facebook or WhatsApp the product image that is display with the link, is it set from the favicon in the public folder if so how can you change the favicon dynamically ,i tried to change the favicon dynamically base on the query string but not sure if thats the right thing to do, any help will be appreciated

Answer 1

Issah Ibrahim wow, I don't really know about this 😅

But I'll try to answer!

So, maybe the site uses a div for you to post!

<div>
<form>
<input type="file" id="file" name="file"/>
<input type="text id=" text name="text" required/>
</form>
</div>

Then maybe they used either PHP or JS to change the favicon! (Posting it probably uses PHP, and honestly I haven't finished the PHP course yet lol)

But the logic probably goes that it is posted with the method POST, then PHP creates a new URL for the image you posted, and using JS you can make the favicon your image!

The favicon in HTML is:
<link rel="shortcut icon" type="image/x-icon" href="favicon.png" id="favicon">

In JS, you can code:

document.getElementById("favicon").href = "yourimage.png";

I hope it helps! Happy programming :)

Answer 2

#TheCoder Am not sure that will work if you want it to change dynamically from server side, Thanks for the comment