网站图标无法显示

Question

网站图标无法显示

23

我尝试将网站图标（favicon）插入到我的网页中，但无法正常工作。请问有人可以告诉我需要插入的代码和样式吗？

<html>
    <head>
        <title>Welcome to Crash - Login or Signup</title>
        <link rel="stylesheet" type="text/css" href="crash_styling.css"></link>
        <link rel="icon" href="/favicon.ico" type="image/x-icon">
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">      
    </head> 

    <body  link="#336666" alink="red" vlink="red">

        <div id="header_title">
            <h1 id="title">crash</h1>
            <p id="motto">Keep track of all your assignments and projects.</p>
        </div>  

        <form name="input" action="html_form_action.asp" method="get" id="user_passEntry">
            Username:<input type="text" name="username" placeholder="Your Username" /> <br />
            Password:<input type="password" name="password" placeholder="Your Password" />
            <input type="submit" value="submit">
        </form>

        <p id="description">Crash is a way students can keep track of their projects and assignments on the computer or on their devices. With crash, you can be sure you'll never turn in something late again.</p>

                <div class="make"><a href="crash_styling" style="text-decoration:none"/>Make a New Assignment</div>
                <div class="edit"><a href="crash_styling" style="text-decoration:none"/>Edit an Assignment</div>
                <div class="check"><a href="crash_styling" style="text-decoration:none"/>Check off an Assignment</div>
    </body> 

</html>

- th3w01f98

1

html。只需使用插入网站图标的标签。 - paddotk

HTML当然是有关的，CSS没有任何共同点。 - Teneff

你确定要使用绝对路径 href="/favicon.ico" 而不是相对路径 href="favicon.ico" 吗？ - Teneff

@poepje 这意味着，如果您正在浏览子文件夹，例如 http://localhost/a/b/c/d/e/，则相对路径将寻找 http://localhost/a/b/c/d/e/favicon.ico，而绝对路径将寻找 http://localhost/favicon.ico。 - Teneff

我还不太明白。/前面什么都没有。如果是 somefolder/favicon.ico 或者 ../favicon.ico，我就能理解了，但这个呢？ - paddotk

显示剩余2条评论

5个回答

14

有时候强制刷新（此链接提供了额外的维基百科信息）可以解决问题。您需要重新加载浏览器的缓存内存。

Firefox：ctrl + shift + R
Chrome：ctrl + 单击 Chrome 的刷新按钮
Edge：与 Chrome 相同，或者 ctrl + F5

其他组合可以在上面提供的链接中找到。

- carloswm85

1

在 Chrome 上，Ctrl + 右键单击重新加载按钮对我有用，谢谢 :) - Yan King Yin

5

很可能您的图标路径不正确。请确认您的 文件路径。尝试使用

href="favicon.ico"

替代

href="/favicon.ico"

也许这会起作用。或者，如果你有某个文件夹中的图标，例如在“images”中。

href="images/favicon.ico"

你做得很好，但如果你的路径错误，图标将无法显示。

所以你的CSS是有效的，如果你的图标和CSS文件在同一级别，那么删除“/”就可以了。

- Simon Dorociak

3

如果使用Chrome：清除缓存，关闭Chrome并重新启动。这是帮助我解决问题的方法。

- chobela

1

制作一个PNG文件
将其设置为index.html页面的网站图标，这样缓存就会被覆盖：

它可以正常工作。

- rutva patel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Taryn · Accepted Answer

要在您的网站上放置网站图标，您需要在 <head> 标签中使用以下内容

<link rel="shortcut icon" href="http://yourwebsitepath/favicon.ico" />

您需要确保图标的路径是正确的。如果路径不正确，它将无法显示。我也看到过缓存问题，使得图标似乎无法正常工作。在清除缓存后，请尝试重新启动浏览器。