Search code examples
htmlreactjsfavicon

Html Icon not shown beside title

I have a favicon Logo for a website inside the folder "public/img/". This is the code that I have written:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="/img/Logo.png" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <!--Google Fonts-->
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link
            href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap"
            rel="stylesheet"
        />
        <title>React App</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

But favicon is not displayed. Why is it not visible?

Solution

  • Try to refresh the cache by holding down СTRL + F5. Or test your app with another browser. If that doesn't help, try this option:

    <link rel="icon" type="image/png" href="/img/Logo.png" />