[已解决]图标在Safari不显示但是在Google能显示是为什么捏

好故事慢慢来 · 发表于 2023-7-27 16:00:13

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="鱼C工作室">
<title>鱼C工作室</title>
<style>
      h1{
         text-align: center;

      }
      p{
         text-align: center;
         font-size: 22px;
      }
      img{
         position: absolute;

         margin-top: -10%;
         margin-left: 60%;
      }
</style>
<link rel="icon" type="image/x-icon" href="IMG_0271.ico">
</head>
<body>
<h1>纪念王小波</h1>
<p>不愿清醒，宁愿一直沉迷放纵。</p>
<p>不知归路，宁愿一世无悔追逐。</p>
<img src="img/1.png" alt="王小波">
</body>
</html>

<link>处到图标不在Safari中显示，应该怎么改呢

最佳答案

月排行榜 / 总排行榜

歌者文明清理员

2023-7-27 17:31:57

好故事慢慢来发表于 2023-7-27 16:48
绝对路径也不可以

那就用 chrome 吧，毕竟 chrome 是主流浏览器（safari 没有开发工具）

我用的 windows，不能测试你的代码

可能 safari 就是设置本地文件不显示图标吧

跳转到最佳答案楼层

isdkz · 发表于 2023-7-27 16:00:30

在您的代码中，图标没有在Safari中显示的问题可能是因为 Safari 在处理图标路径时与其他浏览器稍有不同。在这里，您使用了相对路径来引用图标：

<link rel="icon" type="image/x-icon" href="IMG_0271.ico">

请确保图标文件 IMG_0271.ico 位于与 HTML 文件相同的目录下。但是在某些情况下，相对路径可能会导致在不同浏览器中找不到图标文件的问题。

为了解决这个问题，您可以尝试使用绝对路径来引用图标文件。您可以通过提供完整的URL路径来确保在所有浏览器中都能找到图标文件。例如，如果图标文件位于与HTML文件相同的目录中，您可以这样做：

<link rel="icon" type="image/x-icon" href="/IMG_0271.ico">

如果图标文件位于其他目录中，您需要相应地调整URL，确保它指向正确的位置。使用绝对路径可以避免路径解析问题，从而提高图标显示在不同浏览器中的一致性。

另外，请确保图标文件名的大小写与实际文件名一致，因为在一些操作系统（例如Windows）中，文件名是区分大小写的。

在进行这些更改后，重新加载页面，图标应该能够在Safari和其他浏览器中正确显示。如果问题仍然存在，请检查浏览器的开发者工具（F12）中的网络选项卡，以查看是否有任何关于图标加载的错误信息。

陶远航 · 发表于 2023-7-27 16:00:33

在给出解决方案之前，我需要说明一下，在中国境内开展的AI服务是受到法律法规的管制的，特别是对于未成年人的保护问题。作为AI助手，我将遵守相关法律法规，并遵循不向未成年人提供过于复杂或不适当的信息的原则。

关于你提到的问题，你的代码中引用了一个图标文件（Favicon），但它在Safari浏览器中无法显示。这可能是由于以下几个原因导致的：

1. 图标文件路径错误：请确保你指定的图标文件路径是正确的。在你的代码中，图标文件的路径是"IMG_0271.ico"，但你的图片文件实际位于"img/1.png"，两者路径不一致。你需要根据图片文件的实际路径进行修正。

2. 图标文件格式问题：Safari浏览器对图标文件的支持相对较严格。请确保你使用的图标文件是合法的ICO格式，并且文件本身没有损坏或无效。你可以尝试使用其他图标格式（如PNG）来代替ICO格式，看是否能够在Safari中显示。

3. 缓存问题：有时候浏览器会缓存网页内容，包括图标文件。尝试清除浏览器缓存，然后重新加载网页，看看是否能够解决问题。

在你修复图标显示问题后，可以将代码重新部署到服务器上，并使用最新的代码访问网页。这样就能确保修改的代码生效，同时在不同浏览器中都能正确显示图标。

希望这个解答对你有帮助！如果你还有其他问题，请随时提问。
如果问题已经解决，请设置最佳答案

歌者文明清理员 · 发表于 2023-7-27 16:01:51

有图片吗？

歌者文明清理员 · 发表于 2023-7-27 16:06:14

陶远航发表于 2023-7-27 16:00
在给出解决方案之前，我需要说明一下，在中国境内开展的AI服务是受到法律法规的管制的，特别是对于未成年人 ...

《在给出解决方案之前，我需要说明一下，在中国境内开展的AI服务是受到法律法规的管制的，特别是对于未成年人的保护问题。作为AI助手，我将遵守相关法律法规，并遵循不向未成年人提供过于复杂或不适当的信息的原则。》

好故事慢慢来 · 发表于 2023-7-27 16:07:10

歌者文明清理员发表于 2023-7-27 16:01
有图片吗？

代码和上面的一样，但是google能显示

歌者文明清理员 · 发表于 2023-7-27 16:08:48

好故事慢慢来发表于 2023-7-27 16:07
代码和上面的一样，但是google能显示

把 href="IMG_0271.ico" 换成 href="./IMG_0271.ico" 试试？

好故事慢慢来 · 发表于 2023-7-27 16:11:02

歌者文明清理员发表于 2023-7-27 16:08
把 href="IMG_0271.ico" 换成 href="./IMG_0271.ico" 试试？

试过了还是不行，不知道为什么

好故事慢慢来 · 发表于 2023-7-27 16:12:25

isdkz 发表于 2023-7-27 16:00
在您的代码中，图标没有在Safari中显示的问题可能是因为 Safari 在处理图标路径时与其他浏览器稍有不同。在 ...

改成href="./IMG_0271.ico"还是不行

歌者文明清理员 · 发表于 2023-7-27 16:15:01

好故事慢慢来发表于 2023-7-27 16:12
改成href="./IMG_0271.ico"还是不行

两行都要

<link rel="apple-touch-icon" href="IMG_0271.ico">

好故事慢慢来 · 发表于 2023-7-27 16:23:28

歌者文明清理员发表于 2023-7-27 16:15
两行都要

还是不行很奇怪

歌者文明清理员 · 发表于 2023-7-27 16:25:22

好故事慢慢来发表于 2023-7-27 16:23
还是不行很奇怪

那可能就是 safari 特意设置的，因为 safari 和 chrome 本来用的就不是同一个内核

好故事慢慢来 · 发表于 2023-7-27 16:29:22

歌者文明清理员发表于 2023-7-27 16:25
那可能就是 safari 特意设置的，因为 safari 和 chrome 本来用的就不是同一个内核

好的好的，谢谢啦，但是为啥鱼c论坛的图标都能显示啊，这个是那个速查的网页的源码，我看他也是这样写的啊

歌者文明清理员 · 发表于 2023-7-27 16:33:39

好故事慢慢来发表于 2023-7-27 16:29
好的好的，谢谢啦，但是为啥鱼c论坛的图标都能显示啊，这个是那个速查的网页的源码，我看他也是这样写的 ...

你给的截图里写的是 rel="shortcut icon"

好故事慢慢来 · 发表于 2023-7-27 16:39:00

歌者文明清理员发表于 2023-7-27 16:33
你给的截图里写的是 rel="shortcut icon"

这个我也尝试过了，google就是正常的，Safari就是不行

Mike_python小 · 发表于 2023-7-27 16:40:39

好故事慢慢来发表于 2023-7-27 13:39
这个我也尝试过了，google就是正常的，Safari就是不行

绝对路径呢？

好故事慢慢来 · 发表于 2023-7-27 16:46:00

好故事慢慢来发表于 2023-7-27 16:39
这个我也尝试过了，google就是正常的，Safari就是不行

貌似只能这样

好故事慢慢来 · 发表于 2023-7-27 16:46:33

Mike_python小发表于 2023-7-27 16:40
绝对路径呢？

貌似只能这样

好故事慢慢来 · 发表于 2023-7-27 16:48:03

Mike_python小发表于 2023-7-27 16:40
绝对路径呢？

绝对路径也不可以

歌者文明清理员 · 发表于 2023-7-27 17:31:57

好故事慢慢来发表于 2023-7-27 16:48
绝对路径也不可以

那就用 chrome 吧，毕竟 chrome 是主流浏览器（safari 没有开发工具）

我用的 windows，不能测试你的代码

可能 safari 就是设置本地文件不显示图标吧

账号		自动登录	找回密码
密码			立即注册