Question

所以我最近开始使用Amazon S3并构建一个小型示例Web应用程序。我关注了tutorials，我的网站（包括图片）工作正常。我在我的根目录中添加了一个favicon.ico文件，并在index.html中引用了该文件，但无论我做什么，我都无法在浏览器搜索栏，选项卡或收藏夹列表中显示该图标。

请注意，我使用了步骤2.1 - 第4部分中tutorial提供的存储桶策略权限，以使我的对象可公开访问，我还可以导航到包含我的网站图标的S3存储桶提供的链接。 ico对象，我可以在浏览器中看到它，所以我知道链接有效。

如果链接有效，则Bucket中的所有内容都可以公开访问，而我网站的其余部分都可以使用图片，我做错了什么？

文件结构

的index.html

...
<!-- Favicon -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
...

Amazon S3 Bucket

广告管理政策

更新：我还尝试从我的<link rel="icon" href="favicon.ico" type="image/x-icon">完全删除index.html，并修改它以/前面favicon.ico，<link rel="icon" href="/favicon.ico" type="image/x-icon"> {{1}}无济于事。

Answer 1

通过使用 s3 存储桶中网站图标的完整准确 URL，我能够使其工作。

<link 
  rel="shortcut icon" 
  type="image/icon" 
  href="https://my-s3-bucket.s3.us-east-2.amazonaws.com/favicon.ico"
>

Cloudfront 有权访问这个文件，它只需要知道它在哪里 - 不需要公共存储桶。

如果您只执行相对路径，即 href="favicon.ico"，它将解析为 your-www.domain.com/favicon.ico，这不是文件实际所在的位置。

如果您使用某种打包程序，只要您将基本路径指定为 s3 存储桶的 url，相对路径就可以工作。

Answer 2

听起来这不是Aws / S3问题。您可以通过在本地打开网站（即从本地磁盘而不是S3）检查这一点，看看是否出现了favicon。请注意，Chrome不会显示本地托管网站的图片。

这里有几件事要尝试：

清除浏览器缓存并重新加载页面
在本地运行网站并使用FireFox打开它
请尝试使用png favicon，以防万一你的x-icon

Answer 3

我遇到了同样的问题，很好奇为什么我的一个页面可以工作而另一个页面却不能工作。我发现，如果我在HTML中进行设置（在标头中的标签内部，则效果很好：

<meta>
  <link rel="shortcut icon" type="image/icon" href="images/favicon.png">
</meta>

我也对此进行了测试，它也起作用：

<link rel="shortcut icon" type="image/icon" href="favicon.ico">

显然，如果未指定，它将尝试从amazon.com提取它。
注意：在我的情况下，主存储桶是公共的，但是我也加入了存储桶策略，该策略限制了对特定CIDR块的访问。
希望这会有所帮助！

Answer 4

我遇到了同样的问题，我将图标图标的内容类型更新为image/vnd.microsoft.icon 问题就解决了。

更改内容后，您还应在新的隐身窗口中打开标签，或进行空缓存硬重载。

Answer 5

我今天遇到了同样的问题。我可以确认这是谷歌浏览器的一些缓存问题。起初我是这样的：

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

当为 AWS 加载以及尝试直接从文件系统加载时，它不起作用。所以应该是：

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

通过从文件系统加载确认。但它在 Chrome 中仍然不起作用。在我在 reddit 上发现问题之前，我也尝试了各种方法，作者说它自己解决了，所以我决定这应该是一些缓存问题，所以我尝试在 MS Edge 中打开我的网站，并且成功了。所以我关闭了所有与 Chrome 相关的进程（包括安全 shell 扩展启动了一个）并重新启动了 Chrome 并且它工作了。我敢打赌这是由某种“网页加载优化”功能引起的，该功能缓存（更积极地）页面的元数据部分或类似的东西。

Answer 6

根据我的经验，不需要在存储桶策略中添加任何内容。

将生产构建资源添加到S3＆gt;然后让您完全公开访问所有文件。点击下一步并保存。记住您正在向公众提供只读访问权限。请找截图。

确保检查来自favicon的元数据，如下所示

检查您尝试访问的组是否具有读写权限的权限。

希望有所帮助

在Amazon S3上托管的站点不显示Favicon

6 个答案: