Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to change the favicon using next js

I have problem that the favicon does not change when searched in google.
This is the _document.tsx and the image exists in public folder.
but it still take the last logo and not change to the new one

 <Html dir={dir}>
    <Head>
        <meta property="og:image" content={`https://ghrafy.com/favicon.ico`} />

        {/* <link
            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
            rel="stylesheet"
         /> */}
         <link rel="preconnect" href="https://fonts.googleapis.com"/>
         <link rel="preconnect" href="https://fonts.gstatic.com"/>
         <link href="https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:[email protected]&display=swap" rel="stylesheet"/>
          

    </Head>
    <body>
        <Main />
        <NextScript />
    </body>
</Html>
Tags:

2

Answers


  1. 0

    Use favicon

    Basically the meta og:image is a favicon, and the favicon is the icon that appears next to the website name, usually using og:image Only Used for websites that can be searched on google, So instead then use this code to change the favicon

    <!DOCTYPE html>
<html>
    <head>
  <title>Your website name</title>
  <link rel="icon" type="image/x-icon" href="/path/to/your/icon">
    </head>
    <body>
  <p>your stuff here</p>
    </body>
</html>
    Login or Signup to reply.
  2. 0

    <link rel="icon" href="/favicon.ico" />
    you can use this code instead of existing favicon link tags.

    Ensure that you have cleared the cache in your browser and tested the favicon change in an incognito window to see the updated favicon.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search