Search code examples
javascripthtmlcssfavicon

Favicon is not displaying correctly when link is sent on instagram


When I send my website URL on Instagram the image that it displays is not the image I want to have displayed. My website has a Favicon set and the favicon sends correctly when the URL is sent through text. How do I fix this issue?

enter image description here


Solution

  • If I understand correctly you need add some metadata in head section. Check it here: https://web.dev/learn/html/metadata/

    here is the code you need to add

    <meta property="og:title" content="Machine Learning Workshop" />
    <meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too"/>
    <meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
    <meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />
    

    https://web.dev/learn/html/metadata/#open-graph