所以我最近开始尝试使用 Amazon S3 并构建一个小型示例 Web 应用程序。我关注了tutorials和我的网站，包括图像，工作正常。我添加了一个 favicon.ico文件到我的根目录并在我的 index.html 中引用它但无论我做什么，我都无法让网站图标显示在浏览器搜索栏、选项卡或收藏夹列表中。
请注意，我使用了 tutorial 提供的存储桶策略权限在步骤 2.1 - 第 4 部分使我的对象可公开访问，我还可以导航到保存我的 favicon.ico 对象的 S3 存储桶提供的链接，我可以在浏览器中看到它，所以我知道该链接有效。
如果链接有效，Bucket 中的所有内容都可以公开访问，并且我网站的其余部分(包括图像)也有效，我做错了什么？
文件结构
index.html
...
<!-- Favicon -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
...
Amazon S3 存储桶
存储桶策略
更新:我也尝试删除 <link rel="icon" href="favicon.ico" type="image/x-icon">完全来 self 的index.html并将其修改为 /在 favicon.ico 前像这样<link rel="icon" href="/favicon.ico" type="image/x-icon">无济于事。
最佳答案
我能够通过使用 s3 存储桶中 favicon 的完整准确 URL 来实现它。
<link
rel="shortcut icon"
type="image/icon"
href="https://my-s3-bucket.s3.us-east-2.amazonaws.com/favicon.ico"
>
Cloudfront 有权访问此文件，它只需要知道它在哪里 - 不需要公共(public)存储桶。
如果您只是使用相对路径，即 href="favicon.ico"，那将解析为您的 www.domain.com/favicon.ico，这不是文件实际所在的位置是。
如果您使用某种 bundler ，只要您将基本路径指定为 s3 存储桶的 url，相对路径就可以工作。
关于html - 托管在 Amazon S3 上的站点不显示 Favicon，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48803698/